Penjana Butang

Alat ini membina butang CSS daripada teks, warna, saiz, sempadan, kesan hover, dan kotak-bayang pilihan, dengan pratonton interaktif langsung yang boleh anda tuding. Ia mengeluarkan kelas `.button { ... }` dengan `transition: all 0.2s ease` dan peraturan `.button:hover` berasingan berdasarkan kesan hover yang dipilih (gelapkan, cerahkan, angkat, atau tiada).

1. Masukkan Teks Butang (lalai kepada Click Me). 2. Pilih warna Latar Belakang dan Teks melalui pemilih warna atau input hex. 3. Laraskan Saiz Fon (10-32px), Padding X (8-48px), Padding Y (4-24px), dan Jejari Sempadan (0-50px) dengan peluncur. 4. Tetapkan Warna Sempadan dan Lebar Sempadan (0-5px). 5. Pilih Kesan Hover: gelapkan, cerahkan, angkat, atau tiada. 6. Pilihan aktifkan Kotak Bayang dan laraskan Kabur, Offset X, dan Offset Y. 7. Tuding pratonton untuk melihat kesannya; klik Salin pada kad Output CSS.

Gelap/Cerahkan melaraskan warna latar belakang sebanyak +/-30 unit RGB melalui `adjustBrightness`. Angkat menggunakan `transform: translateY(-2px)` serta `box-shadow: 0 4px 8px rgba(0,0,0,0.2)` semasa hover. Tiada menggugurkan peraturan hover sepenuhnya. Output ialah satu peraturan `.button` yang mengandungi background-color, color, font-size, padding, border-radius, border, cursor, transition, dan kotak-bayang pilihan, diikuti blok `.button:hover` apabila berkenaan. Tiada HTML dijana.