Vizualno oblikujte gumb in pridobite HTML ter CSS za uporabo na svojem spletnem mestu. Začnite s prednastavitvijo, prilagodite tipografijo, barve, obliko in sence, nato pred izvozom predogledajte stanja interakcije.
Prebrskajte 44 prednastavitve v zbirkah Everyday, Classic, Shaped, Expressive, Gradients in Elite. Vsaka prednastavitev je izhodišče, ki ga lahko uredite.
Kako prednastavitve vplivajo na vaš dizajn
Najprej izberite, nato natančno prilagodite
Uporabite zbirko Style za zožitev galerije. Uporaba prednastavitve nadomesti privzete sloge in sloge ob lebdenju, pri čemer ohrani besedilo gumba in ime razreda.
Poskusite preprosto polno polnilo, zaobljene vogale, ostro obrobo ali bolj dekorativno obdelavo. Ko najdete smer, uporabite druge zavihke, da podrobnosti prilagodite svoji strani.
Poskrbite, da bo oznaka delovala pravilno
Nastavite besedilo gumba, družino pisav, velikost, težo, razmik, višino vrstice, poravnavo in barvo besedila. Opazujte, kako se oznaka posodablja med delom.
Natančno prilagodite besedilo in razmik
Tipografija, ki ustreza dejanju
Besedilo vsebuje kontrole pisave in drugo polje za besedilo gumba. Velikost pisave se giblje od 10 do 80 slikovnih pik; navedene družine uporabljajo pisave, ki so na voljo v napravi obiskovalca.
Uporabite kratko oznako, ki opisuje dejanje. V razdelku Fill vodoravno in navpično polnilo dodata prostor okoli nje, ne da bi spremenila velikost pisave. Preverite daljše oznake na strani, kjer bo gumb uporabljen.
Izberite polno ali gradientno polnilo
Uporabite eno barvo ozadja ali zmešajte dve barvi z linearnim gradientom. Izbirniki barv in šestnajstiški vnosi vam omogočajo vizualno ali natančno delo.
Nastavite barve in smer gradienta
Dve barvi, ena jasna smer
V razdelku Fill spremenite slog polnila v Linear gradient, da razkrijete drugo barvo (Second color) in kot gradienta (Gradient angle). Kot se giblje od 0 do 360 stopinj.
Šestnajstiška polja sprejmejo polno šestmestno barvo ali trimestno okrajšavo. Preizkusite belo ali barvno oznako na obeh koncih gradienta; studio ne potrjuje samodejno kontrasta besedila.
Nadzirajte obrobo in globino
Prilagodite povezane ali neodvisne vogale, širino in slog obrobe, sence polja in sence besedila. Dajte gumbu obliko, ki ustreza njegovemu kontekstu.
Raziščite vogale, obrobe in sence
Od ostrega pravokotnika do mehkega ovala
V razdelku Shape ohranite vklopljeno možnost Link all corners za enoten polmer ali jo izklopite, da nastavite vsak vogal posebej. Slogi obrobe vključujejo polno, črtkano, pikčasto, dvojno, vtisnjeno, izbočeno, greben, utor in brez.
V razdelku Shadow nastavite vodoravne in navpične odmike, zamegljenost, barvo in prosojnost. Senca polja ima tudi razširitev in stikalo za vtisnjenost. Senca besedila je ločena, zato lahko oznaki dodate globino, ne da bi spremenili obrobo gumba.
Oblikujte tudi interakcijo
Urejajte privzete sloge in sloge ob lebdenju ločeno. Predogledajte privzeti videz, videz ob lebdenju in aktivni videz, nato primerjajte gumb na svetlem in temnem platnu.
Razumevanje urejanja in stanj predogleda
Dva sloga za urejanje, tri stanja predogleda
Stanje urejanja izbere, kateri slog spreminjajo vaše kontrole. Gumbi stanja platna izberejo le predogled. Lebdenje nad predogledom ali pritisk nanj prav tako prikaže njegovo interakcijo.
Vrednosti ob lebdenju, ki se še vedno ujemajo s privzetimi, sledijo osnovnim urejanjem, dokler niso prilagojene. Izvožena koda CSS vključuje pravilo za lebdenje, ko je potrebno, obrobo za vidnost fokusa, aktivno premikanje in pravilo za zmanjšano gibanje.
Vključite CSS v svoj projekt
Kopirajte ustvarjeno kodo CSS in ustrezen gumb HTML ali prenesite slogovno datoteko. Ime razreda povezuje oba dela.
Kopirajte, prenesite in shranite svoje delo
Preprosta koda, ki jo lahko uporabite neposredno
Izberite prepoznavno ime razreda, kopirajte CSS iz njegovega zavihka, nato kopirajte gumb iz HTML. Prenos shrani datoteko .css, poimenovano po razredu; ne prenese celotne spletne strani.
Predogled in generiranje kode potekata v vašem brskalniku. Studio poskuša zapomniti en osnutek v lokalnem pomnilniku tega brskalnika; izvozite vse, kar želite obdržati. Ponastavitev vrne studio na začetni slog.
Besedilo in slogi v. HTML in CSS ven.
Nalaganje ni potrebno. JavaScript poganja urejevalnik v živo v vašem brskalniku. Kopirajte HTML in CSS ločeno ali prenesite slogovno datoteko CSS. Ustvarjen sklad pisav uporablja pisave, ki so na voljo v napravi gledalca.
