Di atas adalah contoh tombol dengan dan tanpa style.
Button kalau ditranslatekan artinya tombol. Digunakan sebagai element untuk memberikan sebuah action, biasanya pada form online seperti tombol submit atau reset.
Syntax
Untuk membuat button, digunakan syntax <button>teks</button>.
Hasilnya menjadi:
Button Warna
Untuk membuat background warna menggunakan properti background-color, untuk mengganti warna huruf digunaka color.
<style>
.tombol {
background: #5340ff; /* Green */
border: 1px solid black;
color: white;
font-size:18px;
padding: 15px 32px;
text-align: center;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
}
.tombol:hover {
background:black;
color:white;
}
.tombol2 {background-color: #2c45a3;}
.tombol3 {background-color: #fb4b58;}
.tombol4 {background-color: #4cce79; color: black;}
.tombol5 {background-color: #555555;}
</style>
<button class="tombol">Ungu</button>
<button class="tombol tombol2">Biru</button>
<button class="tombol tombol3">Pink</button>
<button class="tombol tombol4">Hijau</button>
<button class="tombol tombol5">Abu-abu</button>
Ukuran Button
Ukuran button bisa diatur, ada banyak metode. Misal dengan menentukan width atau height, padding.
Tapi, di sini saya memberikan contoh dengan mengatur ukuran font.
.huruf1 {font-size:10px}
.huruf2 {font-size:12px}
.huruf3 {font-size:16px}
.huruf4 {font-size:20px}
.huruf5 {font-size:24px}
Ganti hover
Untuk mengganti style ketika kursor diarahkan, maka kita gunakan pseudo class :hover.
button:hover {
background:black;
color:white;
}
Button rounded
Kita juga bisa membuat border rounded atau melengkung.
.rounded {border-radius:10px}
Button shadow
Untuk menambahkan shadow kita butuh box-shadow.
Button border warna
Gunakan border untuk mengatur warna border.
.border {border: 1px solid #2c45a3;}
Disabled button
Untuk membuat tombol yang bisa diklik, kita gunakan dua property.
Pertama adalah opacity untuk membuat warna lebih redup, dan cursor dibuat not-allowed.
.disabled {
opacity:0.5;
cursor:not-allowed
}