Cara menggunakan Gaya Tombol CSS
- Arahkan kursor ke tombol dan klik gaya yang kamu suka.
- Atur warna, ukuran, radius sudut, dan kecepatan, serta status hover, ditekan, dan diklik. Setiap gaya langsung diperbarui.
- Salin CSS dan HTML, atau gunakan Salin semua untuk satu blok kode.
- Untuk Webflow, tekan Salin ke Webflow lalu tempel di Designer dengan Ctrl/⌘+V.
Efek hover yang tetap ringan
Setiap gaya di sini menggunakan CSS biasa, kecuali satu gaya sapuan garis yang menambahkan SVG inline kecil. Tidak ada library dan tidak ada JavaScript. Warna disimpan sebagai custom properties di bagian atas aturan, jadi kalau nanti mau mengubah tampilan tombol cukup ganti dua atau tiga nilai.
- Pengguna keyboard mendapat ring
:focus-visibleyang terlihat pada setiap gaya. - Reduced motion dihormati: gerakan dimatikan untuk pengunjung yang meminta animasi lebih sedikit.
- Link atau tombol: gunakan
<a>untuk berpindah halaman dan<button>untuk melakukan aksi. CSS-nya bekerja untuk keduanya.
Status hover, ditekan, dan diklik
Setiap tombol punya warna teks :hover serta warna dan ukuran :active saat ditekan. Aktifkan Status diklik untuk menambahkan gaya .is-clicked dengan sedikit script, yang cocok untuk tombol suka, simpan, atau ikuti. Pilih rem agar ukuran tombol mengikuti font dasar root, dengan asumsi default browser 16px. Garis tipis 1px dan 2px tetap memakai piksel agar tetap tajam.
Menggunakan gaya di Webflow
Salin ke Webflow menempelkan elemen Embed yang berisi gaya dan tombolnya. Webflow tidak bisa membuat animasi pseudo-element di Style panel, jadi Embed menjaga efeknya tetap persis. Kalau ingin menata tombol sendiri, letakkan CSS-nya di custom code situs kamu lalu beri class pada tombol tersebut.
Ingin membuat tombol dari nol? Gunakan CSS Button Generator. Cek keterbacaan teks dengan Contrast Checker, dan lihat Hamburger Menu Icons untuk tombol menu animasi.
Juga dicari sebagai: efek hover tombol css, tombol css animasi, animasi hover tombol, salin tempel tombol css, tombol hover webflow, tombol css keren, animasi border tombol css.
Tool yang cocok dipakai bersama Gaya Tombol CSS
- Generator Animasi Hover CSS — Rancang animasi hover untuk tombol, kartu, tautan, dan ikon.
- Generator Gradient CSS — Rancang gradient secara visual — geser titik warna, ubah sudut atau jenisnya, mulai dari preset — lalu salin CSS siap pakai dengan warna solid sebagai fallback.
- Generator Box Shadow — Tumpuk beberapa lapis bayangan, atur offset, blur, spread dan opacity langsung di kartu pratinjau, lalu salin CSS box-shadow atau text-shadow.
- Generator Animasi CSS — Desain animasi CSS di atas timeline keyframe sungguhan.