CSS Button Generator Online dengan Pratinjau Hover

CSS Button Generator dengan Pratinjau Langsung

CSS button generator memungkinkan Anda mendesain tombol kustom secara visual dan menyalin CSS rapi yang siap tempel — tanpa menulis properti satu per satu. Sesuaikan latar, teks, padding, garis tepi, bayangan, dan efek hover lewat kontrol sederhana, lalu lihat pratinjau langsung diperbarui seketika.

Buat tombol solid biasa, gradien dua warna, gaya neon menyala, atau transisi hover yang halus, lalu ambil kodenya sebagai aturan CSS atau cuplikan HTML + CSS lengkap. Cocok untuk developer, desainer, dan siapa pun yang ingin tombol menawan tanpa membuatnya dari nol.

Privat by design: tombol dirender dan CSS dibangun sepenuhnya di browser Anda. Tidak ada desain yang diunggah ke server.

Cara Menggunakan CSS Button Generator

Pilih preset awal

Klik salah satu dari 12 preset bawaan — Solid, Outline, Gradien, Pil, 3D Push, Neon, Glass, Minimal, Shadow Lift, Garis Bawah, Membulat, atau Tebal. Tiap preset menyiapkan keadaan normal sekaligus hover sehingga Anda bisa langsung menyesuaikannya.

Sesuaikan keadaan Normal

Dengan tab Normal terbuka, atur Latar (warna Solid atau Gradien dua warna dengan sudut), warna Teks, ukuran font, dan tebal, plus Padding, Garis Tepi, dan Bayangan.

Desain keadaan Hover

Pindah ke tab Hover dan sesuaikan kontrol yang sama untuk apa yang berubah saat hover. Atur durasi dan easing Transisi sekali di tab Normal, lalu arahkan kursor ke tombol pratinjau untuk melihat efeknya.

Pratinjau dan uji

Pratinjau langsung diperbarui secara real-time. Gunakan pengganti Latar untuk menguji tombol pada latar terang, gelap, atau kustom, dan ketik Teks Tombol Anda sendiri untuk melihat label aslinya.

Salin kodenya

Klik Salin CSS untuk hanya aturan .button dan .button:hover, atau Salin HTML + CSS untuk cuplikan lengkap berisi elemen tombol dan blok <style>.

Fitur

Pratinjau Langsung dengan Hover Nyata

Arahkan kursor ke tombol pratinjau untuk memicu keadaan hover CSS dan transisi yang Anda konfigurasikan — tanpa menempel di tempat lain untuk menguji.

Kontrol Normal dan Hover

Desain tiap keadaan secara terpisah lewat tab Normal dan Hover, sehingga Anda mengontrol persis apa yang berubah saat pengguna mengarahkan kursor.

Latar Solid dan Gradien

Gunakan satu warna solid atau gradien linear dua warna dengan warna dari/ke dan sudut yang dapat disetel dari 0 hingga 360 derajat.

Penataan Teks

Atur warna teks, ukuran font dari 10 hingga 32 px, dan aktifkan atau nonaktifkan tebal untuk label tombol.

Kontrol Padding dan Garis Tepi

Setel padding vertikal dan horizontal, plus lebar, warna, dan radius sudut garis tepi hingga bentuk pil penuh.

Bayangan Kotak dengan Opasitas

Kontrol offset X/Y, blur, warna, dan opasitas bayangan untuk menambah kedalaman, angkatan, atau cahaya lembut pada tombol Anda.

Durasi dan Easing Transisi

Atur durasi transisi hover dan pilih kurva easing — ease, ease-in, ease-out, ease-in-out, atau linear.

12 Preset Bawaan

Mulai cepat dengan gaya Solid, Outline, Gradien, Pil, 3D Push, Neon, Glass, Minimal, Shadow Lift, Garis Bawah, Membulat, dan Tebal.

Pengganti Latar Pratinjau

Periksa bagaimana tombol terbaca pada latar terang, gelap, atau warna kustom apa pun sebelum Anda merilisnya.

Teks Tombol yang Dapat Diubah

Ketik label Anda sendiri agar pratinjau mencerminkan kata-kata nyata yang akan Anda pakai, bukan teks placeholder.

Dua Opsi Salin

Salin hanya aturan CSS, atau ambil cuplikan HTML + CSS lengkap dengan elemen tombol yang siap ditempel ke halaman mana pun.

Kode Rapi, Bebas Framework

Hasilnya memakai properti CSS standar, jadi kelas .button yang sama bekerja di HTML biasa, React, Vue, WordPress, dan lainnya.

Pertanyaan yang Sering Diajukan

Bagaimana cara membuat tombol CSS?

Pilih sebuah preset atau mulai dari nol, lalu setel kontrol latar, teks, padding, garis tepi, dan bayangan. Pratinjau langsung menampilkan hasilnya, dan mengklik Salin CSS memberi Anda aturan .button jadi untuk ditempel ke stylesheet Anda.

Bagaimana menambahkan efek hover pada tombol CSS?

Pindah ke tab Hover dan ubah kontrol apa pun — warna, bayangan, garis tepi, dan seterusnya — untuk menentukan tampilan tombol saat hover. Atur durasi dan easing transisi di tab Normal, lalu arahkan kursor ke tombol pratinjau untuk mengujinya. Keadaan hover diekspor sebagai aturan .button:hover.

Bagaimana cara membuat tombol gradien?

Di bagian Latar, klik tombol alih Gradien. Pilih warna Dari dan Ke lalu setel sudut dari 0 hingga 360 derajat. Pratinjau dan kode linear-gradient yang dihasilkan langsung diperbarui.

Bagaimana cara membulatkan sudut tombol CSS?

Gunakan kontrol Radius di bagian Garis Tepi. Naikkan untuk sudut yang lebih lembut, atau dorong hingga 50 px untuk bentuk pil yang membulat penuh. Preset Pil dan Membulat memberi Anda gaya membulat siap pakai untuk memulai.

Apakah kode tombol yang dihasilkan bisa disalin?

Bisa. Salin CSS menyalin aturan .button dan .button:hover, sedangkan Salin HTML + CSS menyalin cuplikan lengkap dengan elemen tombol dibungkus dalam blok <style>, siap ditempel ke halaman HTML mana pun.

Bisakah saya menyesuaikan keadaan normal dan hover secara terpisah?

Tentu. Tab Normal dan Hover masing-masing punya kontrol latar, teks, padding, garis tepi, dan bayangan sendiri, sehingga Anda bisa menentukan persis apa yang berubah saat hover. Pengaturan transisi dipakai bersama dan dikonfigurasi sekali di tab Normal.

Bisakah saya memakai kode tombol ini di proyek mana pun?

Bisa. CSS yang dihasilkan adalah kode biasa dan bebas framework yang memakai properti standar seperti background, border-radius, box-shadow, dan transition. Terapkan kelas .button ke elemen Anda di HTML, React, Vue, Angular, WordPress, atau proyek web mana pun.