Sebuah tombol pada halaman web adalah sebuah elemen HTML yang dapat diklik dan memiliki aksi atau menuju ke halaman tertentu.
Sebuah tombol biasanya digunakan untuk menjalankan sebuah proses. Misalnya pada sebuah form, setelah user mengisi kolom form akan terdapat tombol yang berfungsi untuk mengirim atau menyimpan data yang sudah dimasukkan.
Ada beberapa cara untuk membuat tombol dengan menggunakan elemen pada HTML, diantaranya sebagai berikut:
1. Tombol dengan tag <button>
Secara default anda bisa membut tombol dengan menggunakan tag <button>. Membuatnya tidak memerlukan banyak atribut untuk tampilan defaultnya.
Contoh:
<button>Tombol Default</button>
Anda dapat menggunakan CSS untuk membuat tampilan tombol menjadi lebih menarik seperti mengubah warna dan ukuran tombol.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Button</title>
<style>
.tombol{
/*ubah warna background*/
background-color: #7942ee;
/*ubah warna teks*/
color: white;
/*menghilangkan border*/
border: none;
/*atur sudut border*/
border-radius: 5px;
/*efek bayangan*/
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
/*teks rata tengah*/
text-align: center;
/*ubah jarak margin/luar*/
margin: 5px 2px;
/*ubah jarak padding/dalam*/
padding: 10px 15px;
/*ubah tampilan kursor ketika berada diatas elemen*/
cursor: pointer;
}
.tombol:hover{
/*ubah warna background ketika kursor berada diatas elemen*/
background-color: #6124e3;
}
</style>
</head>
<body>
<button class="tombol">Tombol Default</button>
</body>
</html>
2. Tombol dengan tag <input>
Untuk membuat tombol anda bisa menggunakan tag <input> dengan atribut "type" dengan nilai "button".
Contoh:
<input type="button" value="Tombol"/>
type="button" untuk mendefinisikan elemen tombol.
Value="Tombol" Tulisan yang akan ditampilkan pada tombol.
<!DOCTYPE html>
<html>
<head>
<title>Button</title>
<style>
.tombol{
/*ubah warna background*/
background-color: white;
/*ubah warna tulisan*/
color: black;
/*atur border*/
border: 2px solid #6124e3;
/*atur sudut border*/
border-radius: 5px;
/*membuat efek bayangan*/
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
/*teks rata tengah*/
text-align: center;
/*ubah jarak margin/luar*/
margin: 5px 2px;
/*ubah jarak padding/dalam*/
padding: 10px 15px;
/*ubah tampilan kursor ketika berada diatas elemen*/
cursor: pointer;
}
.tombol:hover{
/*ubah warna background ketika kursor berada diatas elemen*/
background-color: #6124e3;
/*ubah warna tulisan*/
color: white;
}
</style>
</head>
<body>
<input type="button" class="tombol" value="Tombol"/>
</body>
</html>
3. Tombol dengan tag <a>
Tag <a> pada dasarnya adalah untuk membuat sebuah link. Namun dengan menggunakan CSS anda dapat membuat tampilannya menjadi sebuah tombol dengan fungsi sebagaimana tag <a>.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Link Button</title>
<style>
.button{
/*ubah warna background*/
background-color: #424eee;
/*ubah warna teks*/
color: white;
/*hilangkan garis bawah pada teks*/
text-decoration: none;
/*teks rata tengah*/
text-align: center;
/*atur jarak margin/luar*/
margin: 5px 10px;
/*atur jarak padding/dalam*/
padding: 10px 15px;
/*ubah tampilan kursor*/
cursor: pointer;
/*membuat efek bayangan*/
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<br />
<a href="" class="button">Tombol</a>
</body>
</html>
Itu adalah contoh dari pembuatan tombol yang dapat anda gunakan pada halaman web anda. Anda dapat mengubah tampilannya sesuai keinginan anda dengan menggunakan CSS.
Sekian tutorial kali ini. Terimakasih.
EmoticonEmoticon