CSS AdvancedLesson 70Preview gratis
CSS Buttons
Lesson ini bagian dari CSS · Semua level
Ringkasan
Pelajaran ini membahas cara memberi gaya pada elemen `<button>` dan tautan agar terlihat seperti tombol yang menarik serta mudah digunakan. Kita mengatur warna, padding, sudut membulat, bayangan, hingga berbagai keadaan interaksi seperti `:hover`, `:active`, `:focus`, dan `disabled`. Konsistensi gaya dan indikator fokus yang jelas adalah bagian dari praktik aksesibilitas.
Poin kunci
- Reset dasar tombol: hapus border bawaan dan atur `cursor: pointer`
- Keadaan `:hover`, `:active`, dan `:focus` memberi umpan balik saat pengguna berinteraksi
- `:focus-visible` menampilkan penanda fokus hanya saat navigasi papan ketik
- Tombol `disabled` sebaiknya tampak redup dengan `cursor: not-allowed`
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.