Styling Buttons

Tombol adalah komponen yang paling sering diklik di halaman mana pun, dan biasanya tidak hadir sendirian — sebuah halaman punya tombol utama, tombol sekunder, tombol bahaya, dalam beberapa ukuran sekaligus. Menulis CSS untuk masing-masing secara terpisah akan cepat berantakan, jadi kita menyusunnya sebagai sistem: satu base class yang memuat kesamaan, plus class varian yang hanya mengubah warna dan ukuran. Pada chapter ini kita bangun sistem itu, sambil menutup kembali gotcha font: inherit yang sama dengan input, dan menghubungkan state interaksi dari section Pseudo-classes.

Gotcha yang Sama: Button Tidak Mewarisi Font #

Sama seperti input, elemen button tidak mewarisi font-family maupun font-size dari induknya. Tanpa perbaikan, tombol di dalam halaman bertipografi rapi akan menampilkan label dengan font dan ukuran bawaan browser:

.tombol {
  font: inherit;
}

Satu deklarasi ini adalah baris pertama dari setiap CSS tombol. Perhatikan pula perilaku box-sizing: kontrol form — termasuk button — sudah border-box secara bawaan, sehingga padding yang kita tulis tidak memperbesar ukuran totalnya.

Base Class dan Tiga Varian #

Susunan yang lazim: .tombol memuat bentuk dan perilaku, lalu .tombol-utama, .tombol-sekunder, dan .tombol-bahaya hanya menentukan warna. Setiap halaman idealnya memiliki satu tombol utama — aksi yang paling kita harapkan dari pengguna:

.tombol {
  font: inherit;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
}

.tombol-utama {
  background-color: #1f6f54;
  color: #fdfaf3;
}

.tombol-sekunder {
  border-color: #c7d2cb;
  background-color: #fdfaf3;
  color: #1f2933;
}

.tombol-bahaya {
  background-color: #b3362b;
  color: #fdfaf3;
}

Tiga varian dari base class yang sama — bentuk dan ukuran identik, peran berbeda:

Perhatikan border: 1px solid transparent pada base class. Border transparan menjaga semua varian sama tinggi: tombol sekunder yang ber-border nyata tidak akan lebih gemuk satu piksel dibanding tombol utama yang tidak ber-border.

Ukuran dan Tombol Ikon #

Dari base class yang sama, ukuran diturunkan dengan class tambahan yang mengubah padding dan font-size. Tombol ikon memakai prinsip yang sama, hanya paddingnya dibuat simetris sehingga kotaknya persegi:

.tombol-kecil {
  padding: 6px 12px;
  font-size: 0.875rem;
}

.tombol-besar {
  padding: 14px 28px;
  font-size: 1.125rem;
}

.tombol-ikon {
  padding: 10px;
  line-height: 0;
}

Tiga ukuran diturunkan dari base class yang sama, plus tombol ikon persegi berisi SVG:

Ukuran kecil pas untuk baris tabel dan ukuran besar untuk ajakan utama. Nilai line-height: 0 menghilangkan ruang kosong dari tinggi baris sehingga ikon menentukan tinggi tombol, dan ikon SVG inline mewarisi warna varian lewat currentColor. Tombol tanpa teks tetap diberi aria-label — misalnya aria-label="Tutup" — karena butuh nama bagi pembaca layar.

State Interaksi: Hover, Active, Focus-visible #

Tiga pseudo-class dari section Pseudo-classes kini dipasangkan dengan sistem varian. Kuncinya menaruh state di base class dan memakai currentColor agar semua varian ikut berperilaku tanpa ditulis ulang:

.tombol:hover {
  filter: brightness(1.08);
}

.tombol:active {
  filter: brightness(0.94);
}

.tombol:focus-visible {
  outline: 2px solid #1f6f54;
  outline-offset: 2px;
}

.tombol:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

Arahkan kursor, tahan klik, dan tekan Tab pada tombol berikut; tombol ketiga membawa attribute disabled:

Satu set aturan state ini berlaku untuk semua varian sekaligus karena didefinisikan di class dasarnya.

Kesalahan Umum #

Sistem tombol cepat berantakan bila fondasinya dilewati. Tiga kesalahan yang paling sering muncul:

Ringkasan #

Sistem tombol yang sehat tersusun dari base class yang memuat bentuk, font, border transparan, dan state; lalu class varian serta class ukuran yang hanya menimpa bagian yang memang berbeda. Gotcha font: inherit berlaku sama seperti pada input, dan currentColor membuat ikon serta state mengikuti warna tiap varian tanpa duplikasi. Chapter berikutnya memfokuskan pembicaraan pada satu state yang paling sering diabaikan saat menata form: fokus, beserta resep ring yang konsisten.