Design en knapp visuelt og få HTML og CSS for å bruke den på nettsiden din. Start med en forhåndsinnstilling, juster typografi, farger, form og skygger, og forhåndsvis deretter interaksjonstilstandene før du eksporterer.
Bla gjennom 44-forhåndsinnstillinger på tvers av samlingene Everyday, Classic, Shaped, Expressive, Gradients og Elite. Hver forhåndsinnstilling er et utgangspunkt du kan redigere.
Hvordan forhåndsinnstillinger påvirker designet ditt
Velg først, finjuster deretter
Bruk stil-samlingen for å begrense galleriet. Når du bruker en forhåndsinnstilling, erstattes både standard- og hover-stiler, mens knappeteksten og klassenavnet beholdes.
Prøv en enkel heldekkende fyllfarge, et avrundet hjørne, en skarp kontur eller en mer dekorativ behandling. Når du har funnet en retning, bruk de andre fanene for å få detaljene til å passe til siden din.
Få merkelappen til å føles riktig
Angi knappetekst, skrifttype, størrelse, tykkelse, avstand, linjehøyde, justering og tekstfarge. Se merkelappen oppdatere seg mens du jobber.
Finjuster tekst og avstand
Typografi som passer til handlingen
Tekst inneholder skriftkontroller og et ekstra felt for knappetekst. Skriftstørrelsen går fra 10 til 80 px; de oppførte skrifttypene bruker fonter som er tilgjengelige på den besøkendes enhet.
Bruk en kort merkelapp som beskriver handlingen. I Fyll legger horisontal og vertikal utfylling til plass rundt den uten å endre tekststørrelsen. Sjekk lengre merkelapper på siden der knappen skal brukes.
Velg en heldekkende eller gradientfyll
Bruk én bakgrunnsfarge eller bland to farger med en lineær gradient. Fargevelgere og hex-felt lar deg jobbe visuelt eller presist.
Angi farger og gradientretning
To farger, én tydelig retning
I Fyll, endre Fyllstil til Lineær gradient for å vise Andre farge og Gradientvinkel. Vinkelen går fra 0 til 360 grader.
Hex-felt godtar en full sekssifret farge eller en tresifret forkortelse. Test den hvite eller fargede merkelappen mot begge ender av en gradient; studioet sertifiserer ikke automatisk tekstkontrast.
Kontroller kontur og dybde
Juster koblede eller uavhengige hjørner, kantlinjebredde og -stil, boksskygger og tekstskygger. Gi knappen en form som passer til konteksten.
Utforsk hjørner, kantlinjer og skygger
Fra et skarpt rektangel til en myk pilleform
I Form, hold Koble alle hjørner på for en felles radius, eller slå den av for å angi hvert hjørne. Kantlinjestiler inkluderer solid, stiplet, prikket, dobbel, inset, outset, ridge, groove og ingen.
I Skygge, angi horisontale og vertikale forskyvninger, uskarphet, farge og opasitet. Boksskygge har også spredning og en inset-bryter. Tekstskygge er separat, slik at du kan legge til dybde i merkelappen uten å endre knappens kontur.
Design også interaksjonen
Rediger Standard- og Hover-stiler separat. Forhåndsvis Standard-, Hover- og Aktiv-utseende, og sammenlign deretter knappen på lyse og mørke lerreter.
Forstå redigerings- og forhåndsvisningstilstander
To redigerbare stiler, tre forhåndsvisningstilstander
Redigeringstilstanden velger hvilken stil kontrollene dine endrer. Lerretstilstandsknappene velger bare forhåndsvisningen. Ved å holde musen over eller trykke på forhåndsvisningen vises også interaksjonen.
Hover-verdier som fortsatt samsvarer med standarden følger grunnleggende redigeringer til de tilpasses. Den eksporterte CSS inkluderer en hover-regel når det er nødvendig, en fokus-synlig kontur, en aktiv bevegelse og en regel for redusert bevegelse.
Ta med CSS inn i prosjektet ditt
Kopier den genererte CSS og den tilhørende HTML-knappen, eller last ned et stilark. Et klassenavn holder de to delene sammenkoblet.
Kopier, last ned og behold arbeidet ditt
Enkel kode du kan bruke direkte
Velg et distinkt klassenavn, kopier CSS fra fanen, og kopier deretter knappen fra HTML. Nedlasting lagrer en .css-fil oppkalt etter klassen; den laster ikke ned en komplett nettside.
Forhåndsvisning og kodegenerering kjøres i nettleseren din. Studioet prøver å huske ett utkast i denne nettleserens lokale lagring; eksporter alt du vil beholde. Tilbakestill returnerer studioet til startstilen.
Tekst og stiler inn. HTML og CSS ut.
Ingen opplasting er nødvendig. JavaScript driver den direkte editoren i nettleseren din. Kopier HTML og CSS separat, eller last ned CSS-stilarket. Den genererte fontstakken bruker fonter som er tilgjengelige på seerens enhet.
