hover:focus-visible:active:

Hover, Focus & Active

State interaktif: hover:, focus-visible:, active:, dan menggabungkannya dengan transisi.

Tiga state inti

hover: untuk kursor di atas elemen, focus-visible: untuk navigasi keyboard (lebih aksesibel daripada focus:), active: untuk saat tombol ditekan. Cobalah tombol di bawah dengan mouse, lalu tekan Tab sampai tombolnya mendapat fokus.

Tiga state inti live

Menggabungkan state & transisi

Gunakan transition-* agar perubahan antar state terasa halus, bukan melompat. Perhatikan: fokus keyboard memakai outline, bukan ring berbasis box-shadow — ring akan menimpa hard shadow khas neo-brutalism.

Decision Rule

Selalu sediakan focus-visible yang terlihat. Elemen interaktif tanpa indikator fokus = gagal aksesibilitas.