Gumawa ng mga CSS button, isang detalye sa bawat pagkakataon.
I-style ang button nang biswal at kunin ang HTML at CSS para magamit ito sa iyong website. Magsimula sa isang preset, i-adjust ang typography, mga kulay, hugis, at anino, pagkatapos ay i-preview ang mga interaction state bago i-export.
Mag-browse ng mga 44 preset sa mga koleksyong Everyday, Classic, Shaped, Expressive, Gradients, at Elite. Ang bawat preset ay isang panimulang punto na maaari mong i-edit.
Paano nakakaapekto ang mga preset sa iyong disenyo
Pumili muna, bago i-fine-tune
Gamitin ang koleksyong Style para paliitin ang gallery. Ang paglalapat ng preset ay pumapalit sa parehong default at hover style, habang pinapanatili ang text at class name ng iyong button.
Subukan ang simpleng solid fill, hugis na kanto, malinaw na outline, o mas dekoratibong treatment. Kapag nakahanap ka na ng direksyon, gamitin ang ibang tab para gawing angkop ang mga detalye sa iyong page.
Gawing tama ang pakiramdam ng label
Itakda ang text ng button, font family, laki, kapal, spacing, line height, alignment, at kulay ng text. Tingnan ang pag-update ng label habang nagtatrabaho ka.
I-fine-tune ang text at spacing
Typography na angkop sa aksyon
Ang Text ay naglalaman ng mga font control at pangalawang field para sa Button text. Ang laki ng font ay mula 10 hanggang 80 px; ang mga nakalistang pamilya ay gumagamit ng mga font na available sa device ng bisita.
Gumamit ng maikling label na naglalarawan sa aksyon. Sa Fill, ang horizontal at vertical padding ay nagdaragdag ng espasyo sa paligid nito nang hindi binabago ang laki ng type. I-check ang mas mahahabang label sa page kung saan gagamitin ang button.
Pumili ng solid o gradient fill
Gumamit ng isang kulay ng background o paghaluin ang dalawang kulay gamit ang linear gradient. Hinahayaan ka ng mga color picker at hex input na magtrabaho nang biswal o nang may katumpakan.
Itakda ang mga kulay at direksyon ng gradient
Dalawang kulay, isang malinaw na direksyon
Sa Fill, baguhin ang Fill style sa Linear gradient para ipakita ang Second color at Gradient angle. Ang anggulo ay mula 0 hanggang 360 degrees.
Ang mga hex field ay tumatanggap ng buong anim-na-digit na kulay o tatlong-digit na shorthand. I-test ang puti o may kulay na label laban sa magkabilang dulo ng gradient; hindi awtomatikong sine-certify ng studio ang contrast ng text.
Kontrolin ang outline at lalim
I-adjust ang magkakaugnay o independiyenteng mga kanto, lapad at istilo ng border, box shadow, at text shadow. Bigyan ang button ng hugis na angkop sa konteksto nito.
I-explore ang mga kanto, border, at anino
Mula sa malinaw na parihaba hanggang sa malambot na pill
Sa Shape, panatilihing naka-on ang Link all corners para sa isang shared radius, o i-off ito para itakda ang bawat kanto. Ang mga istilo ng border ay kinabibilangan ng solid, dashed, dotted, double, inset, outset, ridge, groove, at none.
Sa Shadow, itakda ang horizontal at vertical offset, blur, kulay, at opacity. Ang box shadow ay mayroon ding spread at inset switch. Ang text shadow ay hiwalay, kaya maaari kang magdagdag ng lalim sa label nang hindi binabago ang outline ng button.
I-design din ang interaction
I-edit nang hiwalay ang Default at Hover style. I-preview ang mga hitsura ng Default, Hover, at Active, pagkatapos ay ikumpara ang button sa maliwanag at madilim na canvas.
Intindihin ang mga editing at preview state
Dalawang editable style, tatlong preview state
Pinipili ng editing state kung aling istilo ang babaguhin ng iyong mga control. Ang mga canvas state button ay para sa preview lamang. Ang pag-hover o pagpindot sa preview ay nagpapakita rin ng interaction nito.
Ang mga hover value na tumutugma pa rin sa default ay sumusunod sa mga base edit hanggang sa ma-customize. Ang na-export na CSS ay may kasamang hover rule kung kinakailangan, focus-visible outline, active movement, at reduced-motion rule.
Dalhin ang CSS sa iyong proyekto
I-copy ang nabuong CSS at katugmang HTML button, o mag-download ng stylesheet. Pinapanatiling konektado ang dalawang piraso ng isang class name.
I-copy, i-download, at panatilihin ang iyong gawa
Plain code na magagamit mo nang direkta
Pumili ng natatanging Class name, i-copy ang CSS mula sa tab nito, pagkatapos ay i-copy ang button mula sa HTML. Ang pag-download ay nagse-save ng .css file na pinangalanan ayon sa class; hindi ito nagda-download ng kumpletong webpage.
Ang preview at code generation ay tumatakbo sa iyong browser. Sinusubukan ng studio na tandaan ang isang draft sa local storage ng browser na ito; i-export ang anumang gusto mong panatilihin. Ibinabalik ng Reset ang studio sa panimulang istilo nito.
Text at mga istilo sa loob. HTML at CSS sa labas.
Hindi kailangan ng upload. Ang JavaScript ang nagpapatakbo sa live editor sa iyong browser. I-copy ang HTML at CSS nang hiwalay, o i-download ang CSS stylesheet. Ang nabuong font stack ay gumagamit ng mga font na available sa device ng viewer.
