Stil en knap visuelt og få HTML og CSS til at bruge den på dit websted. Start med en forudindstilling, juster typografi, farver, form og skygger, og få derefter vist interaktionstilstandene, før du eksporterer.
Gennemse 44 forudindstillinger på tværs af Everyday, Classic, Shaped, Expressive, Gradients og Elite samlingerne. Hver forudindstilling er et udgangspunkt, som du kan redigere.
Hvordan forudindstillinger påvirker dit design
Vælg først, og finjuster derefter
Brug stil-samlingen til at indsnævre galleriet. Anvendelse af en forudindstilling erstatter både standard- og hover-stile, mens din knaptekst og klassenavn bevares.
Prøv et simpelt udfyldt felt, et formet hjørne, en skarp kontur eller en mere dekorativ behandling. Når du har fundet en retning, skal du bruge de andre faner til at få detaljerne til at passe til din side.
Få etiketten til at føles rigtig
Indstil knaptekst, skrifttypefamilie, størrelse, vægt, afstand, linjehøjde, justering og tekstfarve. Se etiketten opdatere, mens du arbejder.
Finjuster tekst og afstand
Typografi, der passer til handlingen
Tekst indeholder skrifttypekontroller og et andet knaptekstfelt. Skriftstørrelsen løber fra 10 til 80 px; de anførte familier bruger skrifttyper, der er tilgængelige på den besøgendes enhed.
Brug en kort etiket, der beskriver handlingen. I Udfyldning tilføjer vandret og lodret polstring plads omkring den uden at ændre typestørrelsen. Tjek længere etiketter på den side, hvor knappen skal bruges.
Vælg en ensfarvet eller gradientfyldning
Brug én baggrundsfarve eller bland to farver med en lineær gradient. Farvevælgere og hex-input lader dig arbejde visuelt eller præcist.
Indstil farver og gradientretning
To farver, én klar retning
I Udfyldning skal du ændre Udfyldningsstil til Lineær gradient for at afsløre Anden farve og Gradientvinkel. Vinklen løber fra 0 til 360 grader.
Hex-felter accepterer en fuld sekscifret farve eller en trecifret forkortelse. Test den hvide eller farvede etiket mod begge ender af en gradient; studiet certificerer ikke automatisk tekstkontrast.
Kontroller kontur og dybde
Juster sammenkædede eller uafhængige hjørner, kantbredde og stil, boksskygger og tekstskygger. Giv knappen en form, der passer til dens kontekst.
Udforsk hjørner, kanter og skygger
Fra et skarpt rektangel til en blød pille
I Form skal du holde Link alle hjørner til for en delt radius, eller slå den fra for at indstille hvert hjørne. Kantstile inkluderer solid, stiplet, punkteret, dobbelt, inset, outset, ridge, groove og ingen.
I Skygge skal du indstille vandrette og lodrette forskydninger, sløring, farve og opacitet. Boksskygge har også spredning og en inset-kontakt. Tekstskygge er separat, så du kan tilføje dybde til etiketten uden at ændre knapkonturen.
Design også interaktionen
Rediger Standard- og Hover-stile separat. Se forhåndsvisning af Standard-, Hover- og Aktiv-udseende, og sammenlign derefter knappen på lyse og mørke lærreder.
Forstå redigerings- og forhåndsvisningstilstande
To redigerbare stile, tre forhåndsvisningstilstande
Redigeringstilstand vælger, hvilken stil dine kontroller ændrer. Lærredstilstandsknapperne vælger kun forhåndsvisningen. At holde musen over eller trykke på forhåndsvisningen viser også dens interaktion.
Hover-værdier, der stadig matcher standarden, følger basisredigeringer, indtil de tilpasses. Den eksporterede CSS inkluderer en hover-regel, når det er nødvendigt, en focus-visible kontur, en aktiv bevægelse og en regel for reduceret bevægelse.
Bring CSS ind i dit projekt
Kopier den genererede CSS og den matchende HTML knap, eller download et typografiark. Et klassenavn holder de to stykker forbundet.
Kopier, download og behold dit arbejde
Almindelig kode, du kan bruge direkte
Vælg et karakteristisk klassenavn, kopier CSS fra dens fane, og kopier derefter knappen fra HTML. Download gemmer en .css fil opkaldt efter klassen; den downloader ikke en komplet webside.
Forhåndsvisning og kodegenerering kører i din browser. Studiet forsøger at huske ét udkast i denne browsers lokale lager; eksporter alt, hvad du vil beholde. Nulstil returnerer studiet til dets startstil.
Tekst og stile ind. HTML og CSS ud.
Ingen upload er nødvendig. JavaScript driver live-editoren i din browser. Kopier HTML og CSS separat, eller download CSS typografiarket. Den genererede skrifttypestak bruger skrifttyper, der er tilgængelige på seerens enhed.
