Gayakan butang secara visual dan dapatkan HTML serta CSS untuk menggunakannya pada laman web anda. Mulakan dengan pratetap, laraskan tipografi, warna, bentuk, dan bayang-bayang, kemudian pratonton keadaan interaksi sebelum mengeksport.
Semak imbas pratetap 44 merentasi koleksi Everyday, Classic, Shaped, Expressive, Gradients, dan Elite. Setiap pratetap ialah titik permulaan yang boleh anda edit.
Bagaimana pratetap mempengaruhi reka bentuk anda
Pilih dahulu, kemudian perhalusi
Gunakan koleksi Gaya untuk mengecilkan galeri. Menggunakan pratetap akan menggantikan gaya lalai dan tuding (hover), sambil mengekalkan teks butang dan nama kelas anda.
Cuba isian padu ringkas, sudut berbentuk, garis luar yang tajam, atau rawatan yang lebih dekoratif. Sebaik sahaja anda menemui hala tuju, gunakan tab lain untuk menyesuaikan perincian dengan halaman anda.
Jadikan label terasa tepat
Tetapkan teks butang, keluarga fon, saiz, ketebalan, jarak, ketinggian baris, penjajaran, dan warna teks. Lihat label dikemas kini semasa anda bekerja.
Perhalusi teks dan jarak
Tipografi yang sesuai dengan tindakan
Teks mengandungi kawalan fon dan medan teks Butang kedua. Saiz fon bermula dari 10 hingga 80 px; keluarga yang disenaraikan menggunakan fon yang tersedia pada peranti pelawat.
Gunakan label pendek yang menerangkan tindakan tersebut. Dalam Isian, pelapik mendatar dan menegak menambah ruang di sekelilingnya tanpa menukar saiz taip. Semak label yang lebih panjang pada halaman tempat butang akan digunakan.
Pilih isian padu atau kecerunan
Gunakan satu warna latar belakang atau gabungkan dua warna dengan kecerunan linear. Pemilih warna dan input heks membolehkan anda bekerja secara visual atau tepat.
Tetapkan warna dan arah kecerunan
Dua warna, satu arah yang jelas
Dalam Isian, tukar gaya Isian kepada Kecerunan linear untuk mendedahkan Warna kedua dan Sudut kecerunan. Sudut bermula dari 0 hingga 360 darjah.
Medan heks menerima warna enam digit penuh atau singkatan tiga digit. Uji label putih atau berwarna pada kedua-dua hujung kecerunan; studio tidak mengesahkan kontras teks secara automatik.
Kawal garis luar dan kedalaman
Laraskan sudut yang dipautkan atau bebas, lebar dan gaya sempadan, bayang kotak, dan bayang teks. Berikan butang bentuk yang sesuai dengan konteksnya.
Terokai sudut, sempadan, dan bayang-bayang
Daripada segi empat tepat yang tajam kepada pil lembut
Dalam Bentuk, pastikan Pautkan semua sudut dihidupkan untuk satu jejari kongsi, atau matikannya untuk menetapkan setiap sudut. Gaya sempadan termasuk padu, sengkang, bertitik, berganda, inset, outset, ridge, groove, dan tiada.
Dalam Bayang, tetapkan offset mendatar dan menegak, kabur, warna, dan kelegapan. Bayang kotak juga mempunyai suis sebaran dan inset. Bayang teks adalah berasingan, jadi anda boleh menambah kedalaman pada label tanpa menukar garis luar butang.
Reka bentuk interaksi juga
Edit gaya Lalai dan Tuding secara berasingan. Pratonton penampilan Lalai, Tuding, dan Aktif, kemudian bandingkan butang pada kanvas terang dan gelap.
Fahami keadaan penyuntingan dan pratonton
Dua gaya boleh edit, tiga keadaan pratonton
Keadaan penyuntingan memilih gaya yang diubah oleh kawalan anda. Butang keadaan kanvas hanya memilih pratonton. Menuding atau menekan pratonton juga menunjukkan interaksinya.
Nilai tuding yang masih sepadan dengan lalai mengikut suntingan asas sehingga disesuaikan. CSS yang dieksport termasuk peraturan tuding apabila diperlukan, garis luar fokus-boleh dilihat, pergerakan aktif, dan peraturan gerakan dikurangkan.
Bawa CSS ke dalam projek anda
Salin CSS yang dijana dan butang HTML yang sepadan, atau muat turun helaian gaya. Nama kelas memastikan kedua-dua bahagian disambungkan.
Salin, muat turun, dan simpan kerja anda
Kod biasa yang boleh anda gunakan secara terus
Pilih nama Kelas yang tersendiri, salin CSS daripada tabnya, kemudian salin butang daripada HTML. Muat turun menyimpan fail .css yang dinamakan mengikut kelas; ia tidak memuat turun halaman web yang lengkap.
Pratonton dan penjanaan kod dijalankan dalam pelayar anda. Studio cuba mengingati satu draf dalam storan tempatan pelayar ini; eksport apa sahaja yang anda ingin simpan. Tetapkan semula mengembalikan studio kepada gaya permulaannya.
Teks dan gaya masuk. HTML dan CSS keluar.
Tiada muat naik diperlukan. JavaScript menguasakan editor langsung dalam pelayar anda. Salin HTML dan CSS secara berasingan, atau muat turun helaian gaya CSS. Tindanan fon yang dijana menggunakan fon yang tersedia pada peranti penonton.
