Alat Percuma: Penjana Butang CSS

Selamat datang ke Penjana Butang CSS! Alat ini membolehkan anda mereka bentuk dan menyesuaikan butang dengan mudah menggunakan pelbagai kawalan untuk warna, sempadan, teks dan banyak lagi. Dengan pratonton langsung, anda boleh melihat serta-merta perubahan yang anda buat dan menjana kod CSS yang sepadan, yang boleh disalin untuk digunakan pada tapak web dan projek anda.

Pautan Alat: Alat ini tersedia di webdevtales.com

UI alat:

ciri-ciri:

• Sesuaikan warna latar belakang dan teks, termasuk keadaan tuding.
• Laraskan jejari sempadan untuk setiap sudut.
• Tambahkan bayang-bayang kotak dengan tetapan diperhalus.
• Jana CSS untuk reka bentuk butang.
• Rawak gaya butang dengan satu klik.
• Salin CSS yang dijana ke papan keratan.
• Gambaran Keseluruhan Bahagian Penjana Butang CSS

1. Penyesuaian Warna Butang

Dalam bahagian ini, anda boleh menentukan warna untuk kedua-dua keadaan lalai butang dan keadaan tudingnya:

• Warna Latar Belakang: Tetapkan warna latar belakang butang.
• Tuding Warna Latar Belakang: Sesuaikan latar belakang apabila dilegar di atas.
• Warna Teks: Tetapkan warna teks butang.
• Warna Teks Tuding: Tentukan warna teks apabila butang dituding ke atas.

2. Penyesuaian Jejari Sempadan

Laraskan kebulatan sudut butang. Setiap sudut (kiri atas, kanan atas, kiri bawah, kanan bawah) boleh ditetapkan secara berasingan:

• Jejari Kiri Atas: Mengawal pembundaran sudut kiri atas.
• Jejari Atas Kanan: Mengawal pembundaran penjuru kanan sebelah atas.
• Jejari Kiri Bawah: Mengawal pembundaran sudut kiri bawah.
• Jejari Bawah Kanan: Mengawal pembundaran sudut kanan bawah.

Selain itu, anda boleh menetapkan nilai jejari yang berasingan untuk keadaan tuding.

3. Penyesuaian Bayangan Kotak

Buat kesan bayang-bayang di sekeliling butang anda dengan melaraskan tetapan ini:

• Offset Mendatar: Gerakkan bayang ke kiri atau kanan.
• Offset Menegak: Menggerakkan bayang ke atas atau ke bawah.
• Jejari Kabur: Mengawal kelembutan tepi bayang-bayang.
• Sebaran: Mentakrifkan betapa besar atau kecil bayang-bayang itu.
• Warna Bayangan: Tetapkan warna bayang-bayang.

4. Tetapan Padding, Sempadan dan Lebar

Anda boleh mengubah suai jarak di dalam butang dan menentukan sempadan:

• Padding: Laraskan ruang di dalam butang.
• Warna Sempadan: Tetapkan warna sempadan.
• Lebar Sempadan: Laraskan ketebalan sempadan.

Pratonton Langsung

Bahagian Pratonton Langsung memaparkan paparan masa nyata butang anda semasa anda membuat perubahan. Tuding pada butang untuk melihat kesan tuding serta-merta.

Butang Tindakan

1. Salin Kod CSS
Setelah anda berpuas hati dengan reka bentuk butang anda, anda boleh menyalin CSS yang dihasilkan dengan mengklik butang Salin Kod CSS. Pop timbul akan muncul, menunjukkan kod CSS, yang boleh anda salin ke papan keratan anda.

2. Hasilkan Rawak
Rasa kreatif? Klik Random Generate untuk menggunakan nilai rawak untuk semua tetapan, memberikan anda gaya butang yang unik dengan setiap klik.

Cara Penggunaan

• Buka alat: Lawati halaman tempat penjana dihoskan.
• Sesuaikan butang: Gunakan kawalan untuk menyesuaikan warna, teks, jejari jidar, bayang-bayang dan gaya lain.
• Lihat pratonton langsung: Lihat kemas kini butang anda secara langsung dalam kawasan pratonton semasa anda membuat perubahan.
• Salin CSS: Setelah anda berpuas hati dengan reka bentuk anda, klik Salin Kod CSS untuk melihat CSS yang dijana dan salin ke papan keratan anda.
• Gunakan CSS: Tampal CSS yang disalin ke dalam lembaran gaya projek anda.

Penggunaan Lanjutan

• Untuk reka bentuk responsif, laraskan tetapan berdasarkan saiz skrin. Penjana secara automatik menyesuaikan diri dengan skrin yang lebih kecil untuk antara muka mesra mudah alih.

Nikmati membina butang yang cantik dengan mudah!

Pautan Alat: Alat ini tersedia di webdevtales.com

Atas ialah kandungan terperinci Alat Percuma: Penjana Butang CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!