MenusLesson 52Preview gratis
Button Group
Lesson ini bagian dari How To · Semua level
Ringkasan
Button group menggabungkan beberapa tombol terkait menjadi satu deretan horizontal yang rapi. Dengan menghapus jarak ganda dan mengatur sudut hanya pada ujung grup, tombol terlihat seperti satu kontrol utuh. Pola ini sering dipakai untuk pilihan tampilan, filter, atau aksi berkelompok.
Poin kunci
- display: flex menempatkan tombol dalam satu baris dan memudahkan pengaturan celah.
- margin-left: -1px pada tombol berikutnya menghilangkan border ganda.
- border-radius hanya diberikan pada tombol pertama dan terakhir.
- Kelas .active menandai pilihan yang sedang digunakan.
- z-index pada tombol aktif menjaga bordernya tetap terlihat di atas tombol lain.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.