Ta primer uporablja samo kontrolnike generatorja. Zgornje slike prikazujejo dejanske prenesene slogovne datoteke, uporabljene na običajnih gumbih HTML, ne posnetkov zaslona urejevalnika.
Začnite s Signature
Odprite generator gumbov CSS. V razdelku Prednastavitve izberite Signature iz zbirke Everyday. V polje Besedilo gumba vnesite „Get started“. V območju kode nastavite Ime razreda na cta-button.
Prednastavitev nadomesti privzete sloge in sloge ob lebdenju, medtem ko vaša oznaka in ime razreda ostaneta nespremenjena. Izberite izhodišče, preden opravite podrobne prilagoditve.
Ime razreda poveže pravila CSS z vašim gumbom HTML. Generator očisti nepodprte znake; uporabite kratko, prepoznavno ime, da se izognete oblikovanju nepovezanih elementov.
Ustvarite zaobljen gumb s prelivom
Stanje urejanja naj ostane na Privzeto. V razdelku Besedilo izberite System sans, velikost pisave 18 px in krepko težo. Obdržite belo barvo besedila, normalen slog, sredinsko poravnavo in višino vrstice 1.4.
V razdelku Polnilo izberite Linearni preliv. Uporabite dve barvi in kot spodaj. Nastavite vodoravno oblazinjenje na 32 px in navpično oblazinjenje na 16 px. V razdelku Oblika ohranite omogočeno Poveži vse kote in nastavite polmer kota na 100 px. Širina obrobe ostane 0 px.
V razdelku Senca ohranite omogočeno Senca polja. Uporabite vodoravni zamik 0 px, navpični zamik 8 px, zameglitev 24 px, razširitev −4 px, barvo #460BD8 in motnost 32%. Pustite notranjo senco in senco besedila izklopljeni.
Oblazinjenje spremeni prostor okoli besedila. Polmer kota spremeni obris. Velik polmer ustvari to zaobljeno obliko, ne da bi povečal širino oznake.
Določite lastno obravnavo za lebdenje
Preklopite stanje urejanja na Lebdenje. V razdelku Polnilo spremenite barvo ozadja v #33099E in drugo barvo v #6D20BF. Ohranite kot preliva na 135°. V razdelku Senca spremenite navpični zamik na 10 px in zameglitev na 28 px. Ostale nastavitve pustite nespremenjene.
Uporabite gumbe na platnu Privzeto, Lebdenje in Aktivno za pregled vsakega stanja. Prav tako lahko lebdite nad gumbom za predogled ali ga pritisnete. Spremenite platno med svetlim in temnim, da preverite rob in senco.
Stanje urejanja izbere, katere sloge spreminjate. Stanje platna spremeni le tisto, kar si ogledujete v predogledu. Pred prilagajanjem videza v mirovanju se vrnite na privzeto urejanje.
Lastnosti lebdenja, ki se še vedno ujemajo s privzetimi, sledijo poznejšim privzetim urejanjem. Ko prilagodite lastnost lebdenja, ostane neodvisna. Po spremembi osnovnega sloga znova preverite obe stanji.
Izvozite in preizkusite na svoji strani
Izberite zavihek CSS in uporabite Kopiraj CSS ali izberite Prenesi, da shranite cta-button.css. Izberite zavihek HTML in kopirajte ujemajočo se oznako gumba. HTML vključuje isto ime razreda in gumb s tipom="button".
Dodajte CSS v svojo slogovno datoteko ali povežite preneseno datoteko s svoje strani. Postavite HTML tja, kamor gumb spada. Oba izvoza delujeta skupaj: gumb HTML sam po sebi ne vključuje svojega oblikovanja.
Odprite stran in preizkusite njena stanja privzeto, lebdenje, fokus tipkovnice in pritisnjeno stanje. Izvoz vključuje obris focus-visible, majhen aktivni premik in pravilo za zmanjšano gibanje. Vaši okoliški slogi in nameščene pisave lahko še vedno vplivajo na rezultat.
Ustvarjeni gumb je oblikovan kontrolnik. Povežite njegovo obnašanje ob kliku v svojem projektu; pri dodajanju v obrazec uporabite pravilen tip gumba.
cta-button.css
Preneseno ime datoteke sledi imenu razreda.
Pogosta vprašanja
Ali potrebujem ogrodje CSS?
Ne. Izhod je standardni CSS in navaden gumb HTML. Prilepite CSS v svojo slogovno datoteko in na gumbu uporabite ujemajoči se razred.
Ali prenos shrani tudi HTML?
Prenos shrani datoteko .css, poimenovano po razredu. Oznako gumba kopirajte ločeno z zavihka HTML.
Ali lahko vsakemu kotu določim drugačen polmer?
Da. V razdelku Oblika izklopite Poveži vse kote, nato neodvisno nastavite Zgoraj levo, Zgoraj desno, Spodaj desno in Spodaj levo. Ta primer jih ohranja povezane za zaobljeno obliko.
Ali bo moj dizajn naslednjič še tukaj?
Studio poskuša trenutni osnutek shraniti v lokalni pomnilnik tega brskalnika. To ni račun ali varnostna kopija za več naprav. Nastavitve brskalnika, brisanje podatkov spletnega mesta ali ponastavitev ga lahko odstranijo ali zamenjajo, zato izvozite delo, ki ga želite obdržati.
Ali je moj gumb naložen na strežnik?
Predogled sloga in generiranje CSS/HTML potekata v vašem brskalniku. Urejevalnik ne nalaga besedila vašega gumba ali osnutka sloga za ustvarjanje izvoza.
Dajte svojemu naslednjemu gumbu svoj slog.
Izberite izhodišče, prilagodite podrobnosti in vnesite kodo v svoj projekt.