CSS Tombol

Memberi gaya pada tombol dengan CSS

Di halaman ini

1. CSS Tombol

Elemen tombol <button> merupakan elemen HTML yang berfungsi untuk memulai eksekusi suatu tindakan dihalaman web. Sehingga biasanya tampilan elemen ini akan didesain kontras (mencolok) agar mudah terlihat.

Contoh tampilan tombol default tanpa kustom:

Mengkustom tombol

padding; margin; border-radius

<button>Tombol</button>
<button>Tombol</button>
<button>Tombol</button>
<button>Tombol</button>
<button>Tombol</button>
<button>Tombol</button>
<style>
button { color: inherit; padding: 10px 25px;
         margin: 5px; border-radius: 8px;}
</style>

Mengatur border tombol.

<button class='b1'>Tombol</button>
<button class='b2'>Tombol</button>
<button class='b3'>Tombol</button>
<button class='b4'>Tombol</button>
<button class='b5'>Tombol</button>
<button class='b6'>Tombol</button>

<style>
.b1 { border: 2px solid cornflowerblue;}
.b2 { border: 2px solid steelblue;}
.b3 { border: 2px solid teal;}
.b4 { border: 2px solid tomato;}
.b5 { border: 2px solid saddlebrown;}
.b6 { border: 2px solid seagreen;}
</style>

Style border lengkap lihat di: CSS border

Mengatur latar belakang (background) tombol.

<button class='b1'>Tombol</button>
<button class='b2'>Tombol</button>
<button class='b3'>Tombol</button>
<button class='b4'>Tombol</button>
<button class='b5'>Tombol</button>
<button class='b6'>Tombol</button>

<style>
.b1 { background: cornflowerblue;}
.b2 { background: steelblue;}
.b3 { background: teal;}
.b4 { background: tomato;}
.b5 { background: saddlebrown;}
.b6 { background: seagreen;}
</style>

Tombol dengan :hover

<button class='b1'>Tombol1</button>
<button class='b2'>Tombol2</button>
<button class='b3'>Tombol3</button>
<button class='b4'>Tombol4</button>
<button class='b5'>Tombo5l</button>
<button class='b6'>Tombol6</button>
<style>
.b1 { border: 2px solid cornflowerblue;}
.b2 { border: 2px solid steelblue;}
.b3 { border: 2px solid teal;}
.b4 { background: tomato; color: #fff;}
.b5 { background: saddlebrown; color: #fff;}
.b6 { background: seagreen; color: #fff;}
</style>

<style>
.b1:hover { color: #fff;
          background: cornflowerblue}
.b2:hover { color: #fff; 
          background: steelblue}
.b3:hover { color: #fff;
          background: teal}
.b4:hover { color: tomato;
          background: white}
.b5:hover { color: saddlebrown;
          background: white}
.b6:hover { color: seagreen;
          background: white}
</style>