Membuat Tombol HTML dengan Hover Halus Menggunakan CSS
Tombol yang baik harus mudah dikenali, memiliki kontras cukup, dan memberikan umpan balik saat disentuh atau diarahkan kursor. Contoh ini menggunakan HTML sederhana dan transisi CSS.
Hal yang perlu diperhatikan
- Markup anchor semantik
- Transisi warna singkat
- Sudut membulat
- Fokus keyboard terlihat
Cara menerapkannya
Mulailah dari versi paling sederhana dan pastikan struktur HTML tetap mudah dipahami. Setelah fungsi dasar bekerja, atur tampilan melalui CSS seperlunya. Coba skenario layar besar, layar kecil, serta kondisi ketika isi artikel lebih panjang dari perkiraan.
Contoh kode
<a class="demo-btn" href="#contoh">Lihat contoh</a>
<style>
.demo-btn{display:inline-block;padding:12px 20px;border-radius:999px;background:#171717;color:#fff;text-decoration:none;transition:transform .2s,background .2s}
.demo-btn:hover{background:#404040;transform:translateY(-2px)}
.demo-btn:focus-visible{outline:3px solid #b8df2b;outline-offset:3px}
</style>Tips sebelum dipublikasikan
- Hindari animasi yang terlalu panjang.
- Jangan menghilangkan outline tanpa pengganti.
- Uji tombol di latar terang dan gelap.
Catatan untuk pengguna FajriLab
Contoh ini dibuat sebagai materi demonstrasi untuk menguji gaya artikel FajriLab. Sesuaikan kode, pengaturan, dan kebutuhan aksesibilitas sebelum digunakan pada situs produksi.
Saat artikel sebenarnya siap diterbitkan, ganti gambar sementara, perbarui isi sesuai hasil pengujian, lalu periksa tautan serta tampilan responsif. Artikel contoh ini tidak dimaksudkan sebagai klaim bahwa suatu produk atau fitur sudah tersedia.
Komentar
Posting Komentar