Formge en knapp visuellt och hämta HTML och CSS för att använda den på din webbplats. Börja med en förinställning, justera typografi, färger, form och skuggor, och förhandsgranska sedan interaktionstillstånden innan du exporterar.
Bläddra bland 44-förinställningar i kollektionerna Everyday, Classic, Shaped, Expressive, Gradients och Elite. Varje förinställning är en utgångspunkt som du kan redigera.
Hur förinställningar påverkar din design
Välj först, finjustera sedan
Använd stilkollektionen för att begränsa galleriet. När du använder en förinställning ersätts både standard- och hovringsstilar, medan knapptext och klassnamn behålls.
Prova en enkel solid fyllning, ett rundat hörn, en skarp kontur eller en mer dekorativ behandling. När du hittat en riktning, använd de andra flikarna för att få detaljerna att passa din sida.
Få etiketten att kännas rätt
Ställ in knapptext, typsnitt, storlek, vikt, avstånd, radavstånd, justering och textfärg. Se etiketten uppdateras medan du arbetar.
Finjustera text och avstånd
Typografi som passar handlingen
Text innehåller typsnittskontroller och ett andra fält för knapptext. Typsnittsstorleken sträcker sig från 10 till 80 px; de listade typsnittsfamiljerna använder typsnitt som finns tillgängliga på besökarens enhet.
Använd en kort etikett som beskriver handlingen. I Fyllning lägger horisontell och vertikal utfyllnad till utrymme runt den utan att ändra textstorleken. Kontrollera längre etiketter på sidan där knappen ska användas.
Välj en solid eller gradientfyllning
Använd en bakgrundsfärg eller blanda två färger med en linjär gradient. Färgväljare och hex-inmatningar låter dig arbeta visuellt eller exakt.
Ställ in färger och gradientriktning
Två färger, en tydlig riktning
I Fyllning, ändra Fyllningsstil till Linjär gradient för att visa Andra färg och Gradientvinkel. Vinkeln sträcker sig från 0 till 360 grader.
Hex-fält accepterar en fullständig sexsiffrig färg eller en tresiffrig förkortning. Testa den vita eller färgade etiketten mot båda ändarna av en gradient; studion certifierar inte automatiskt textkontrast.
Kontrollera kontur och djup
Justera länkade eller oberoende hörn, kantbredd och stil, boxskuggor och textskuggor. Ge knappen en form som passar dess sammanhang.
Utforska hörn, kanter och skuggor
Från en skarp rektangel till en mjuk pill-form
I Form, behåll Länka alla hörn aktiverat för en delad radie, eller stäng av det för att ställa in varje hörn individuellt. Kantstilar inkluderar solid, streckad, prickad, dubbel, inset, outset, ridge, groove och ingen.
I Skugga, ställ in horisontella och vertikala förskjutningar, oskärpa, färg och opacitet. Boxskugga har även spridning och en inset-växel. Textskugga är separat, så du kan lägga till djup i etiketten utan att ändra knappens kontur.
Designa även interaktionen
Redigera Standard- och Hovringsstilar separat. Förhandsgranska utseenden för Standard, Hovring och Aktiv, och jämför sedan knappen på ljusa och mörka dukar.
Förstå redigerings- och förhandsgranskningstillstånd
Två redigerbara stilar, tre förhandsgranskningstillstånd
Redigeringstillståndet väljer vilken stil dina kontroller ändrar. Dukens tillståndsknappar väljer endast förhandsgranskningen. Att hovra över eller trycka på förhandsgranskningen visar också dess interaktion.
Hovringsvärden som fortfarande matchar standard följer basredigeringar tills de anpassas. Den exporterade CSS inkluderar en hovringsregel vid behov, en fokus-synlig kontur, en aktiv rörelse och en regel för reducerad rörelse.
Ta med CSS in i ditt projekt
Kopiera den genererade CSS och matchande HTML-knapp, eller ladda ner ett stilark. Ett klassnamn håller de två delarna sammankopplade.
Kopiera, ladda ner och spara ditt arbete
Enkel kod som du kan använda direkt
Välj ett distinkt klassnamn, kopiera CSS från dess flik, kopiera sedan knappen från HTML. Nedladdning sparar en .css-fil uppkallad efter klassen; den laddar inte ner en komplett webbsida.
Förhandsgranskning och kodgenerering körs i din webbläsare. Studion försöker komma ihåg ett utkast i webbläsarens lokala lagring; exportera allt du vill behålla. Återställ återställer studion till dess startstil.
Text och stilar in. HTML och CSS ut.
Ingen uppladdning behövs. JavaScript driver live-redigeraren i din webbläsare. Kopiera HTML och CSS separat, eller ladda ner CSS-stilarket. Det genererade typsnittsstacket använder typsnitt som finns tillgängliga på tittarens enhet.
