Contoh ini hanya menggunakan kontrol generator. Gambar di atas menunjukkan stylesheet yang diunduh sebenarnya yang diterapkan pada tombol HTML biasa, bukan tangkapan layar editor.
Mulai dengan Signature
Buka Generator Tombol CSS. Di Presets, pilih Signature dari koleksi Everyday. Atur teks Tombol ke “Get started”. Di area kode, atur Nama kelas ke cta-button.
Preset menggantikan gaya default dan hover, sementara label dan nama kelas Anda tetap ada. Pilih titik awal Anda sebelum melakukan penyesuaian mendetail.
Nama kelas menghubungkan aturan CSS ke tombol HTML Anda. Generator membersihkan karakter yang tidak didukung; gunakan nama yang singkat dan unik untuk menghindari penataan elemen yang tidak terkait.
Buat pil gradien
Biarkan status Editing pada Default. Di Text, pilih System sans, Ukuran font 18 px, dan Weight Bold. Pertahankan warna teks putih, gaya normal, perataan tengah, dan tinggi baris 1.4.
Di Fill, pilih Linear gradient. Gunakan dua warna dan sudut di bawah. Atur Padding horizontal ke 32 px dan Padding vertikal ke 16 px. Di Shape, biarkan Link all corners aktif dan atur Corner radius ke 100 px. Border width tetap 0 px.
Di Shadow, biarkan Box shadow aktif. Gunakan offset horizontal 0 px, offset vertikal 8 px, blur 24 px, spread −4 px, warna #460BD8, dan opasitas 32%. Biarkan Inset shadow dan Text shadow nonaktif.
Padding mengubah ruang di sekitar teks. Corner radius mengubah garis luar. Radius besar menciptakan bentuk pil ini tanpa membuat label lebih lebar.
Berikan perlakuan khusus pada hover
Alihkan status Editing ke Hover. Di Fill, ubah Background color ke #33099E dan Second color ke #6D20BF. Pertahankan sudut gradien pada 135°. Di Shadow, ubah Vertical offset ke 10 px dan Blur ke 28 px. Biarkan pengaturan lainnya tidak berubah.
Gunakan tombol Default, Hover, dan Active pada kanvas untuk memeriksa setiap status. Anda juga dapat mengarahkan kursor atau menekan tombol pratinjau. Ubah kanvas antara terang dan gelap untuk meninjau tepi dan bayangannya.
Status Editing memilih gaya mana yang Anda ubah. Status kanvas hanya mengubah apa yang Anda pratinjau. Kembali ke pengeditan Default sebelum menyesuaikan tampilan istirahat.
Properti hover yang masih cocok dengan default akan mengikuti pengeditan default nanti. Setelah Anda menyesuaikan properti hover, properti tersebut tetap independen. Periksa kembali kedua status setelah mengubah gaya dasar.
Ekspor dan uji di halaman Anda
Pilih tab CSS dan gunakan Copy CSS, atau pilih Download untuk menyimpan cta-button.css. Pilih tab HTML dan salin markup tombol yang sesuai. HTML menyertakan nama kelas yang sama dan tombol dengan type="button".
Tambahkan CSS ke stylesheet Anda, atau tautkan file yang diunduh dari halaman Anda. Tempatkan HTML di tempat tombol seharusnya berada. Kedua ekspor bekerja bersama: tombol HTML saja tidak menyertakan penataannya.
Buka halaman dan uji status default, hover, fokus keyboard, dan ditekan. Ekspor menyertakan garis luar focus-visible, gerakan aktif kecil, dan aturan reduced-motion. Gaya di sekitar dan font yang terinstal masih dapat memengaruhi hasilnya.
Tombol yang dihasilkan adalah kontrol yang ditata. Hubungkan perilaku kliknya di proyek Anda; gunakan jenis tombol yang benar saat menambahkannya ke formulir.
cta-button.css
Nama file yang diunduh mengikuti nama kelas.
Pertanyaan umum
Apakah saya memerlukan kerangka kerja CSS?
Tidak. Outputnya adalah CSS standar ditambah tombol HTML biasa. Tempel CSS ke stylesheet Anda sendiri dan gunakan kelas yang cocok pada tombol.
Apakah Download juga menyimpan HTML?
Download menyimpan file .css yang dinamai sesuai kelas. Salin markup tombol secara terpisah dari tab HTML.
Bisakah saya memberikan radius yang berbeda pada setiap sudut?
Ya. Di Shape, nonaktifkan Link all corners, lalu atur Top left, Top right, Bottom right, dan Bottom left secara independen. Contoh ini membiarkannya tertaut untuk bentuk pil.
Apakah desain saya akan tetap ada di lain waktu?
Studio mencoba menyimpan draf saat ini di penyimpanan lokal peramban ini. Ini bukan akun atau cadangan lintas perangkat. Pengaturan peramban, menghapus data situs, atau Atur Ulang dapat menghapus atau menggantinya, jadi eksporlah pekerjaan yang ingin Anda simpan.
Apakah tombol saya diunggah ke server?
Pratinjau gaya dan pembuatan CSS/HTML berjalan di peramban Anda. Editor tidak mengunggah teks tombol atau draf gaya Anda untuk membuat ekspor.
Berikan gaya tersendiri pada tombol Anda berikutnya.
Pilih titik awal, sesuaikan detailnya, dan bawa kodenya ke proyek Anda.