Styling Buttons

Tombol adalah komponen interaktif yang paling sering dilihat dan diklik pengguna, sehingga inkonsistensinya paling terasa: satu tombol memakai gaya bawaan browser, satu lagi bergaya rounded biru. Kabar baiknya, dibanding kontrol form lain, elemen button relatif sederhana untuk distyle — hampir semua properti CSS dapat diterapkan langsung tanpa perlu appearance: none. Yang tetap perlu disiapkan secara sadar ada tiga: warisan font, sistem varian, dan ukuran tap yang nyaman.

Mereset Tombol dengan font: inherit #

Sama seperti input, elemen <button> tidak mewarisi font halamannya — teks di dalam tombol memakai font dan ukuran bawaan user-agent. Berbeda dengan input, kita tidak memerlukan appearance: none untuk mengambil alih tampilan tombol; cukup deklarasikan properti yang ingin diubah:

.btn {
  font: inherit;
  padding: 10px 20px;
  min-height: 44px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.btn-primary {
  background-color: rgb(37, 99, 235);
  color: rgb(255, 255, 255);
}

.btn-outline {
  background-color: transparent;
  border: 2px solid rgb(37, 99, 235);
  color: rgb(37, 99, 235);
}

Mari kita telaah aturan dasarnya:

1. Baris 2 (font: inherit): menyalin font halaman ke tombol — tanpa baris ini, teks tombol tampil dengan font bawaan browser yang berbeda dari sekitarnya.
2. Baris 3–4 (padding, min-height): padding memberi jarak teks ke tepi, sementara min-height: 44px menjaga tinggi minimum tombol untuk kenyamanan sentuhan (dibahas di bagian akhir).
3. Baris 5–6 (border: none, border-radius): border default abu-abu dari user-agent diganti nol, lalu sudut diberi radius 8px.
4. Baris 7 (cursor: pointer): pointer menandai elemen yang bisa diklik; browser tidak otomatis memberinya pada <button>.
5. Baris 9–15 (varian): dua class varian menimpa latar dan warna teks. Keduanya ber-specificity sama (satu class), sehingga urutan penulisan menentukan — varian ditulis setelah .btn.

Hasil di Browser:

Tombol "Simpan Perubahan" (btn-primary) berlatar rgb(37, 99, 235)
dengan teks putih rgb(255, 255, 255) dan tinggi minimum 44px.
Tombol "Batal" (btn-outline) transparan dengan border biru
rgb(37, 99, 235).

Varian lewat Class #

Pola satu class dasar + class varian di atas adalah bentuk paling ringkas dari sistem tombol yang dapat tumbuh: btn-primary, btn-outline, dan belakangan btn-ghost atau btn-danger cukup ditambahkan tanpa menyentuh .btn. Dua kebiasaan menjaga pola ini tetap sehat. Pertama, letakkan semua properti bentuk (padding, radius, min-height) di class dasar dan hanya warna di varian, sehingga varian baru tidak menyalin ulang properti bentuk. Kedua, gunakan kombinasi selector yang sederhana — .btn.btn-primary bila varian wajib dipasangkan dengan dasar, atau cukup .btn-primary bila tak ada risiko pemakaian tunggal.

Ukuran Tap dan Umpan Balik #

Angka 44px pada min-height bukan pilihan estetika semata: panduan platform seluler menyarankan target sentuh sekitar 44–48px, dan target yang terlalu kecil meningkatkan salah tekan. Lebar juga perlu dijaga dengan padding horizontal, bukan lebar tetap, agar label panjang tidak memaksa teks meluber. Untuk umpan balik, keadaan :hover dan :active cukup menggelapkan latar satu tingkat:

.btn-primary:hover  { background-color: rgb(29, 78, 216); }
.btn-primary:active { background-color: rgb(30, 64, 175); }

Dua keadaan di atas cukup untuk mayoritas kebutuhan; jangan menambah varian yang tidak pernah dipakai. Agar pergantian warnanya halus alih-alih melompat mendadak, tambahkan transition: background-color 0.15s pada .btn — properti transition dibahas tuntas pada section Transitions dan Animations. Keadaan ketiga yang wajib dipikirkan adalah :disabled: tombol yang dinonaktifkan perlu tampak redup lewat aturan .btn:disabled dengan latar dan teks kontras rendah, dan status kontrol nonaktif kita bedah lebih jauh pada Chapter Validation States .

Demo pada chapter ini menampilkan kedua varian beserta probe otomatisnya: latar dan warna teks tombol primary, tinggi minimum 44px, serta border tombol outline.

.btn {
  font: inherit;
  padding: 10px 20px;
  min-height: 44px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.btn-primary {
  background-color: rgb(37, 99, 235);
  color: rgb(255, 255, 255);
}

.btn-outline {
  background-color: transparent;
  border: 2px solid rgb(37, 99, 235);
  color: rgb(37, 99, 235);
}

.btn-primary:hover {
  background-color: rgb(29, 78, 216);
}

.btn-primary:active {
  background-color: rgb(30, 64, 175);
}