Ang halimbawang ito ay gumagamit lamang ng mga control ng generator. Ang mga larawan sa itaas ay nagpapakita ng mga aktwal na na-download na stylesheet na inilapat sa mga karaniwang HTML button, hindi mga screenshot ng editor.
Buksan ang CSS Button Generator
Magsimula sa Signature
Buksan ang CSS Button Generator. Sa Presets, piliin ang Signature mula sa koleksyon ng Everyday. Itakda ang Button text sa “Get started”. Sa area ng code, itakda ang Class name sa cta-button.
Pinapalitan ng preset ang default at hover styles, habang nananatili ang iyong label at class name. Piliin ang iyong panimulang punto bago gumawa ng mga detalyadong pagsasaayos.
Ikinokonekta ng class name ang mga CSS rule sa iyong HTML button. Nililinis ng generator ang mga hindi suportadong character; gumamit ng maikli at natatanging pangalan upang maiwasan ang pag-style sa mga elementong walang kaugnayan.
Gumawa ng gradient pill
Panatilihin ang Editing state sa Default. Sa Text, piliin ang System sans, Font size 18 px, at Weight Bold. Panatilihin ang kulay na puti ng text, normal na style, centered alignment, at line height 1.4.
Sa Fill, piliin ang Linear gradient. Gamitin ang dalawang kulay at anggulo sa ibaba. Itakda ang Horizontal padding sa 32 px at Vertical padding sa 16 px. Sa Shape, panatilihing naka-enable ang Link all corners at itakda ang Corner radius sa 100 px. Ang Border width ay mananatiling 0 px.
Sa Shadow, panatilihing naka-enable ang Box shadow. Gamitin ang horizontal offset 0 px, vertical offset 8 px, blur 24 px, spread −4 px, kulay #460BD8, at opacity 32%. Iwanang naka-off ang Inset shadow at Text shadow.
Binabago ng padding ang espasyo sa paligid ng text. Binabago ng corner radius ang outline. Ang malaking radius ay lumilikha ng pill shape na ito nang hindi ginagawang mas malapad ang label.
Bigyan ang hover ng sarili nitong treatment
Ilipat ang Editing state sa Hover. Sa Fill, baguhin ang Background color sa #33099E at Second color sa #6D20BF. Panatilihin ang gradient angle sa 135°. Sa Shadow, baguhin ang Vertical offset sa 10 px at Blur sa 28 px. Iwanang hindi nababago ang iba pang mga setting.
Gamitin ang mga button na Default, Hover, at Active sa canvas upang suriin ang bawat state. Maaari mo ring i-hover o pindutin ang preview button. Baguhin ang canvas sa pagitan ng light at dark upang suriin ang gilid at anino nito.
Pinipili ng Editing state kung aling mga style ang babaguhin mo. Ang canvas state ay binabago lamang ang iyong pini-preview. Bumalik sa Default editing bago ayusin ang resting appearance.
Ang mga hover property na tumutugma pa rin sa default ay sumusunod sa mga susunod na default edit. Kapag na-customize mo na ang isang hover property, mananatili itong independent. Suriing muli ang parehong state pagkatapos baguhin ang base style.
I-export at subukan sa iyong page
Piliin ang CSS tab at gamitin ang Copy CSS, o piliin ang Download para i-save ang cta-button.css. Piliin ang HTML tab at kopyahin ang tumutugmang button markup. Ang HTML ay may kasamang parehong class name at isang button na may type="button".
Idagdag ang CSS sa iyong stylesheet, o i-link ang na-download na file mula sa iyong pahina. Ilagay ang HTML kung saan nararapat ang button. Ang dalawang export ay magkasamang gumagana: ang isang HTML button lamang ay hindi kasama ang styling nito.
Buksan ang page at subukan ang default, hover, keyboard focus, at pressed states nito. Ang export ay may kasamang focus-visible outline, maliit na active movement, at reduced-motion rule. Ang iyong mga nakapaligid na style at naka-install na font ay maaari pa ring makaapekto sa resulta.
Ang nabuong button ay isang styled control. Ikonekta ang click behavior nito sa iyong proyekto; gamitin ang tamang button type kapag idinadagdag ito sa isang form.
cta-button.css
Ang na-download na filename ay sumusunod sa class name.
Mga karaniwang tanong
Kailangan ko ba ng CSS framework?
Hindi. Ang output ay standard CSS kasama ang isang simpleng HTML button. I-paste ang CSS sa sarili mong stylesheet at gamitin ang tumutugmang class sa button.
Kasama ba sa Download ang HTML?
Ang Download ay nagse-save ng .css file na ipinangalan sa class. Kopyahin ang button markup nang hiwalay mula sa HTML tab.
Maaari ko bang bigyan ang bawat sulok ng magkakaibang radius?
Oo. Sa Shape, i-turn off ang Link all corners, pagkatapos ay itakda ang Top left, Top right, Bottom right, at Bottom left nang hiwalay. Ang halimbawang ito ay pinapanatili silang naka-link para sa pill shape.
Mananatili ba ang aking disenyo sa susunod na pagkakataon?
Sinusubukan ng studio na i-save ang kasalukuyang draft sa local storage ng browser na ito. Hindi ito isang account o cross-device backup. Ang mga setting ng browser, pag-clear ng data ng site, o ang Reset ay maaaring mag-alis o magpalit nito, kaya i-export ang gawaing nais mong panatilihin.
Ang aking button ba ay ina-upload sa isang server?
Ang preview ng styling at ang pag-generate ng CSS/HTML ay tumatakbo sa iyong browser. Hindi ina-upload ng editor ang iyong button text o styling draft para gawin ang export.
Bigyan ang iyong susunod na button ng sarili nitong istilo.
Pumili ng panimulang punto, ayusin ang mga detalye, at dalhin ang code sa iyong proyekto.