Tata tombol secara visual dan dapatkan HTML serta CSS untuk menggunakannya di situs web Anda. Mulailah dengan preset, sesuaikan tipografi, warna, bentuk, dan bayangan, lalu pratinjau status interaksi sebelum mengekspor.
Telusuri preset 44 di seluruh koleksi Everyday, Classic, Shaped, Expressive, Gradients, dan Elite. Setiap preset adalah titik awal yang dapat Anda edit.
Bagaimana preset memengaruhi desain Anda
Pilih dulu, lalu sempurnakan
Gunakan koleksi Style untuk mempersempit galeri. Menerapkan preset akan mengganti gaya default dan hover, namun tetap mempertahankan teks tombol dan nama kelas Anda.
Coba isian solid sederhana, sudut berbentuk, garis luar yang tajam, atau tampilan yang lebih dekoratif. Setelah menemukan arah yang tepat, gunakan tab lain untuk menyesuaikan detail agar pas dengan halaman Anda.
Buat label terasa pas
Atur teks tombol, jenis font, ukuran, ketebalan, spasi, tinggi baris, perataan, dan warna teks. Lihat label diperbarui saat Anda bekerja.
Sempurnakan teks dan spasi
Tipografi yang sesuai dengan tindakan
Teks berisi kontrol font dan kolom teks Tombol kedua. Ukuran font berkisar dari 10 hingga 80 piksel; keluarga font yang tercantum menggunakan font yang tersedia di perangkat pengunjung.
Gunakan label singkat yang menjelaskan tindakan. Dalam Fill, padding horizontal dan vertikal menambah ruang di sekitarnya tanpa mengubah ukuran teks. Periksa label yang lebih panjang di halaman tempat tombol akan digunakan.
Pilih isian solid atau gradien
Gunakan satu warna latar belakang atau padukan dua warna dengan gradien linear. Pemilih warna dan input hex memungkinkan Anda bekerja secara visual atau presisi.
Atur warna dan arah gradien
Dua warna, satu arah yang jelas
Dalam Fill, ubah gaya Fill menjadi Linear gradient untuk menampilkan Second color dan Gradient angle. Sudutnya berkisar dari 0 hingga 360 derajat.
Kolom Hex menerima warna enam digit penuh atau singkatan tiga digit. Uji label putih atau berwarna terhadap kedua ujung gradien; studio tidak secara otomatis memverifikasi kontras teks.
Kontrol garis luar dan kedalaman
Sesuaikan sudut yang terhubung atau independen, lebar dan gaya batas, bayangan kotak, dan bayangan teks. Berikan tombol bentuk yang sesuai dengan konteksnya.
Jelajahi sudut, batas, dan bayangan
Dari persegi panjang yang tajam hingga pil yang lembut
Dalam Shape, biarkan Link all corners aktif untuk satu radius bersama, atau matikan untuk mengatur setiap sudut. Gaya batas mencakup solid, dashed, dotted, double, inset, outset, ridge, groove, dan none.
Dalam Shadow, atur offset horizontal dan vertikal, blur, warna, dan opasitas. Bayangan kotak juga memiliki spread dan sakelar inset. Bayangan teks terpisah, sehingga Anda dapat menambahkan kedalaman pada label tanpa mengubah garis luar tombol.
Rancang juga interaksinya
Edit gaya Default dan Hover secara terpisah. Pratinjau tampilan Default, Hover, dan Active, lalu bandingkan tombol pada kanvas terang dan gelap.
Memahami status pengeditan dan pratinjau
Dua gaya yang dapat diedit, tiga status pratinjau
Status pengeditan memilih gaya mana yang diubah oleh kontrol Anda. Tombol status kanvas hanya memilih pratinjau. Mengarahkan kursor atau menekan pratinjau juga menunjukkan interaksinya.
Nilai hover yang masih cocok dengan default mengikuti pengeditan dasar hingga disesuaikan. CSS yang diekspor menyertakan aturan hover saat diperlukan, garis luar focus-visible, gerakan aktif, dan aturan reduced-motion.
Bawa CSS ke dalam proyek Anda
Salin CSS yang dihasilkan dan tombol HTML yang cocok, atau unduh stylesheet. Nama kelas menjaga kedua bagian tetap terhubung.
Salin, unduh, dan simpan pekerjaan Anda
Kode polos yang dapat Anda gunakan secara langsung
Pilih nama Class yang khas, salin CSS dari tabnya, lalu salin tombol dari HTML. Unduhan menyimpan file .css yang dinamai sesuai kelas; ini tidak mengunduh halaman web lengkap.
Pratinjau dan pembuatan kode berjalan di browser Anda. Studio mencoba mengingat satu draf di penyimpanan lokal browser ini; ekspor apa pun yang ingin Anda simpan. Reset mengembalikan studio ke gaya awalnya.
Teks dan gaya masuk. HTML dan CSS keluar.
Tidak perlu unggah. JavaScript mendukung editor langsung di browser Anda. Salin HTML dan CSS secara terpisah, atau unduh stylesheet CSS. Tumpukan font yang dihasilkan menggunakan font yang tersedia di perangkat penampil.
