CSS Button Generator
Generate styled buttons with CSS code
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;
}Reka butang tersuai dengan penggayaan CSS menggunakan Penjana Butang kami. Buat butang gaya dengan warna, saiz, sempadan dan kesan tuding untuk projek web anda.
Key Features
Teks dan gaya butang boleh disesuaikan
Pemilih warna untuk warna latar belakang dan teks
Pelapik boleh laras, saiz fon dan jejari jidar
Berat fon dan pilihan gaya
Penggayaan sempadan (tiada, pepejal, putus-putus, bertitik)
Pilihan warna kesan tuding
Penjana Butang
Masukkan Teks Butang
Taip teks label yang anda mahu muncul pada butang anda
Sesuaikan Warna
Gunakan pemilih warna untuk menetapkan warna latar belakang, teks dan tuding
Laraskan Dimensi
Tetapkan padding, saiz fon dan jejari jidar untuk saiz
Tambah Penggayaan
Pilih berat fon dan pilih gaya sempadan jika mahu
Salin CSS
Klik Salin untuk mendapatkan kod CSS untuk butang gaya anda
Use Cases
Mencipta butang seruan tindak untuk halaman pendaratan
Mereka bentuk gaya butang yang konsisten untuk aplikasi web
Membina keadaan tuding butang untuk maklum balas interaktif
Memprototaip komponen UI untuk sistem reka bentuk
Frequently Asked Questions
Bolehkah saya mencipta keadaan butang yang berbeza?
Ya, penjana mencipta CSS keadaan biasa dan tuding secara automatik
Apakah kelas CSS yang dihasilkan?
Alat ini menjana nama kelas semantik berdasarkan teks butang anda
Bolehkah saya menyesuaikan gaya sempadan?
Ya, pilih daripada tiada, pepejal, putus-putus, bertitik atau dua sempadan dengan lebar tersuai
Adakah pengeluaran kod sudah sedia?
Ya, semua CSS yang dihasilkan dioptimumkan dan sedia untuk digunakan dalam pengeluaran
Tool Information
Related Tools You Might Like
Color Palette Generator from Image
Extract dominant colors from an image
RGB/HEX Converter
Convert between RGB and HEX color formats
CSS Gradient Generator
Create custom CSS gradients with preview
WCAG Contrast Checker
Check color contrast according to WCAG standards
Digital Signature Generator
Create stylized digital signatures with different fonts
Box Shadow Generator
Generate CSS box shadows
Surfboard Volume Calculator
Calculate the perfect surfboard volume based on your weight, experience level, and wave conditions.
Wave Height Converter
Convert between different wave height measurements (face height, Hawaiian scale, ocean swell).
Scuba Dive Planner
Plan your scuba dive with depth limits, bottom time, and safety decompression requirements.