Generator Tombol CSS
Hasilkan tombol gaya dengan kode CSS
tools.buttonGenerator.title
tools.buttonGenerator.description
.click-me {
padding: 12px 18px;
font-size: 16px;
font-weight: 600;
border-radius: 4px;
border: none;
background-color: #3B82F6;
color: #FFFFFF;
cursor: pointer;
}
.click-me:hover {
background-color: #2563EB;
}Rancang tombol khusus dengan gaya CSS menggunakan Generator Tombol kami. Buat tombol bergaya dengan warna, ukuran, batas, dan efek hover untuk proyek web Anda.
Key Features
Teks dan gaya tombol yang dapat disesuaikan
Pemilih warna untuk warna latar dan teks
Padding, ukuran font, dan radius batas yang dapat disesuaikan
Berat font dan opsi gaya
Gaya pinggiran (tidak ada, padat, putus-putus, putus-putus)
Pemilihan warna efek hover
Pembuat Tombol
Masukkan Teks Tombol
Ketik teks label yang ingin Anda tampilkan di tombol
Sesuaikan Warna
Gunakan pemilih warna untuk menyetel warna latar belakang, teks, dan arahkan kursor
Sesuaikan Dimensi
Atur padding, ukuran font, dan radius batas untuk ukuran
Tambahkan Gaya
Pilih berat font dan pilih gaya batas jika diinginkan
Salin CSS
Klik Salin untuk mendapatkan kode CSS untuk tombol gaya Anda
Use Cases
Membuat tombol ajakan bertindak untuk laman landas
Merancang gaya tombol yang konsisten untuk aplikasi web
Membangun status hover tombol untuk umpan balik interaktif
Membuat prototipe komponen UI untuk sistem desain
Frequently Asked Questions
Bisakah saya membuat status tombol yang berbeda?
Ya, generator membuat CSS status normal dan hover secara otomatis
Kelas CSS apa yang dihasilkan?
Alat ini menghasilkan nama kelas semantik berdasarkan teks tombol Anda
Bisakah saya menyesuaikan gaya batas?
Ya, pilih dari tidak ada, batas padat, putus-putus, putus-putus, atau ganda dengan lebar khusus
Apakah kode sudah siap produksi?
Ya, semua CSS yang dihasilkan telah dioptimalkan dan siap digunakan dalam produksi
Tool Information
Related Tools You Might Like
Penjangkit Palet Warna dari Gambar
Ekstrak warna dominan dari suatu gambar
RGB / HEX Converter
Ubah antara format warna RGB dan HEX
Generator Gradien CSS
Buat gradien CSS gubahan dengan pratinjau
Pemeriksa Kontras WCAG
Periksa kontras warna sesuai dengan standar WCAG
Generator Signature Digital
Buat gaya tanda-tangan digital dengan fonta yang berbeda
Generator Bayangan Kotak
Buat bayangan kotak CSS
Kalkulator Volume papan selancar
Hitung volume papan selancar yang sempurna berdasarkan berat badan, tingkat pengalaman, dan kondisi gelombang.
Konverter Tinggi Gelombang
Mengubah ukuran tinggi gelombang yang berbeda (tinggi wajah, skala Hawaii, gelombang laut).
Scuba Dive Planner
Rencana menyelam scuba Anda dengan batas kedalaman, bawah waktu, dan keselamatan dekompresi persyaratan.