Contoh ini hanya menggunakan kawalan penjana. Imej di atas menunjukkan helaian gaya yang dimuat turun sebenar yang digunakan pada butang HTML biasa, bukan tangkapan skrin editor.
Mulakan dengan Signature
Buka Penjana Butang CSS. Dalam Pratetap, pilih Signature daripada koleksi Everyday. Tetapkan teks Butang kepada “Get started”. Dalam kawasan kod, tetapkan nama Kelas kepada cta-button.
Pratetap menggantikan gaya lalai dan tuding, manakala label dan nama kelas anda kekal. Pilih titik permulaan anda sebelum membuat pelarasan terperinci.
Nama kelas menghubungkan peraturan CSS kepada butang HTML anda. Penjana membersihkan aksara yang tidak disokong; gunakan nama yang pendek dan tersendiri untuk mengelakkan penggayaan elemen yang tidak berkaitan.
Cipta pil kecerunan
Pastikan keadaan Penyuntingan pada Lalai. Dalam Teks, pilih System sans, Saiz fon 18 px, dan Berat Bold. Kekalkan warna teks putih, gaya biasa, penjajaran tengah, dan ketinggian baris 1.4.
Dalam Isian, pilih Kecerunan linear. Gunakan dua warna dan sudut di bawah. Tetapkan jarak Mendatar kepada 32 px dan jarak Menegak kepada 16 px. Dalam Bentuk, pastikan Pautkan semua bucu didayakan dan tetapkan Jejari bucu kepada 100 px. Lebar sempadan kekal 0 px.
Dalam Bayang, pastikan Bayang kotak didayakan. Gunakan offset mendatar 0 px, offset menegak 8 px, kabur 24 px, sebaran −4 px, warna #460BD8, dan kelegapan 32%. Biarkan Bayang dalam dan Bayang teks dimatikan.
Jarak mengubah ruang di sekeliling teks. Jejari bucu mengubah garis luar. Jejari yang besar mencipta bentuk pil ini tanpa menjadikan label lebih lebar.
Berikan tuding rawatan tersendiri
Tukar keadaan Penyuntingan kepada Tuding. Dalam Isian, tukar warna Latar belakang kepada #33099E dan warna Kedua kepada #6D20BF. Kekalkan sudut kecerunan pada 135°. Dalam Bayang, tukar offset Menegak kepada 10 px dan Kabur kepada 28 px. Biarkan tetapan lain tidak berubah.
Gunakan butang Lalai, Tuding dan Aktif kanvas untuk memeriksa setiap keadaan. Anda juga boleh menuding atau menekan butang pratonton. Tukar kanvas antara terang dan gelap untuk menyemak tepi dan bayangnya.
Keadaan penyuntingan memilih gaya yang anda ubah. Keadaan kanvas hanya mengubah apa yang anda pratonton. Kembali ke Penyuntingan lalai sebelum melaraskan penampilan rehat.
Sifat tuding yang masih sepadan dengan lalai akan mengikuti suntingan lalai kemudian. Sebaik sahaja anda menyesuaikan sifat tuding, ia kekal bebas. Semak semula kedua-dua keadaan selepas menukar gaya asas.
Eksport dan uji dalam halaman anda
Pilih tab CSS dan gunakan Salin CSS, atau pilih Muat turun untuk menyimpan cta-button.css. Pilih tab HTML dan salin markup butang yang sepadan. HTML termasuk nama kelas yang sama dan butang dengan type="button".
Tambah CSS ke helaian gaya anda, atau pautkan fail yang dimuat turun daripada halaman anda. Letakkan HTML di tempat butang itu sepatutnya berada. Kedua-dua eksport berfungsi bersama: butang HTML sahaja tidak termasuk penggayaannya.
Buka halaman dan uji keadaan lalai, tuding, fokus papan kekunci dan ditekan. Eksport termasuk garis luar fokus-boleh dilihat, pergerakan aktif kecil dan peraturan gerakan dikurangkan. Gaya sekeliling dan fon yang dipasang masih boleh menjejaskan hasilnya.
Butang yang dijana ialah kawalan bergaya. Sambungkan kelakuan kliknya dalam projek anda; gunakan jenis butang yang betul apabila menambahnya pada borang.
cta-button.css
Nama fail yang dimuat turun mengikut nama kelas.
Soalan lazim
Adakah saya memerlukan rangka kerja CSS?
Tidak. Outputnya ialah CSS standard ditambah butang HTML biasa. Tampal CSS ke dalam helaian gaya anda sendiri dan gunakan kelas yang sepadan pada butang.
Adakah Muat turun menyimpan HTML juga?
Muat turun menyimpan fail .css yang dinamakan sempena kelas. Salin markup butang secara berasingan daripada tab HTML.
Bolehkah saya memberikan setiap bucu jejari yang berbeza?
Ya. Dalam Bentuk, matikan Pautkan semua bucu, kemudian tetapkan Kiri atas, Kanan atas, Kanan bawah dan Kiri bawah secara bebas. Contoh ini mengekalkannya dipautkan untuk bentuk pil.
Adakah reka bentuk saya masih di sini pada masa akan datang?
Studio cuba menyimpan draf semasa dalam storan setempat pelayar ini. Ia bukan akaun atau sandaran merentas peranti. Tetapan pelayar, pembersihan data tapak, atau Tetapan Semula boleh membuang atau menggantikannya, jadi eksport kerja yang anda ingin simpan.
Adakah butang saya dimuat naik ke pelayan?
Pratonton penggayaan dan penjanaan CSS/HTML dijalankan dalam pelayar anda. Editor tidak memuat naik teks butang atau draf penggayaan anda untuk mencipta eksport.
Berikan butang seterusnya gaya tersendiri.
Pilih titik permulaan, laraskan perincian, dan bawa kod tersebut ke dalam projek anda.