Detta exempel använder endast generatorns kontroller. Bilderna ovan visar faktiska nedladdade stilmallar applicerade på vanliga HTML-knappar, inte skärmdumpar av editorn.
Börja med Signature
Öppna CSS-knappgeneratorn. I förinställningar, välj Signature från Everyday-kollektionen. Ställ in knapptext till “Get started”. I kodområdet, ställ in klassnamn till cta-button.
En förinställning ersätter standard- och hovringsstilar, medan din etikett och ditt klassnamn förblir desamma. Välj din startpunkt innan du gör detaljerade justeringar.
Klassnamnet kopplar CSS-reglerna till din HTML-knapp. Generatorn rensar tecken som inte stöds; använd ett kort, distinkt namn för att undvika att styla orelaterade element.
Skapa gradient-pillerknappen
Behåll redigeringsläget på Default. I Text, välj System sans, teckenstorlek 18 px och vikt Bold. Behåll den vita textfärgen, normal stil, centrerad justering och radavstånd 1.4.
I Fill, välj Linear gradient. Använd de två färgerna och vinkeln nedan. Ställ in horisontell utfyllnad till 32 px och vertikal utfyllnad till 16 px. I Shape, behåll Link all corners aktiverat och ställ in hörnradie till 100 px. Kantbredden förblir 0 px.
I Shadow, behåll Box shadow aktiverat. Använd horisontell förskjutning 0 px, vertikal förskjutning 8 px, oskärpa 24 px, spridning −4 px, färg #460BD8 och opacitet 32%. Lämna Inset shadow och Text shadow avstängda.
Utfyllnad ändrar utrymmet runt texten. Hörnradie ändrar konturen. En stor radie skapar denna pillerform utan att göra etiketten bredare.
Ge hovring sin egen behandling
Växla redigeringsläge till Hover. I Fill, ändra bakgrundsfärg till #33099E och andra färg till #6D20BF. Behåll gradientvinkeln på 135°. I Shadow, ändra vertikal förskjutning till 10 px och oskärpa till 28 px. Lämna de andra inställningarna oförändrade.
Använd knapparna Default, Hover och Active på arbetsytan för att inspektera varje tillstånd. Du kan också hovra över eller trycka på förhandsgranskningsknappen. Ändra arbetsytan mellan ljus och mörk för att granska dess kant och skugga.
Redigeringsläget väljer vilka stilar du ändrar. Arbetsytans tillstånd ändrar bara vad du förhandsgranskar. Återgå till Default-redigering innan du justerar utseendet i viloläge.
Hovringsegenskaper som fortfarande matchar standard följer senare standardredigeringar. När du väl har anpassat en hovringsegenskap förblir den oberoende. Kontrollera båda tillstånden igen efter att ha ändrat basstilen.
Exportera och testa på din sida
Välj fliken CSS och använd Copy CSS, eller välj Download för att spara cta-button.css. Välj fliken HTML och kopiera matchande knappmarkering. HTML inkluderar samma klassnamn och en knapp med type="button".
Lägg till CSS i din stilmall, eller länka den nedladdade filen från din sida. Placera HTML där knappen ska vara. De två exportfilerna fungerar tillsammans: en HTML-knapp ensam inkluderar inte sin styling.
Öppna sidan och testa dess standard-, hovrings-, tangentbordsfokus- och nedtryckta tillstånd. Exporten inkluderar en focus-visible-kontur, en liten aktiv rörelse och en regel för minskad rörelse. Dina omgivande stilar och installerade typsnitt kan fortfarande påverka resultatet.
Den genererade knappen är en stylad kontroll. Koppla dess klickbeteende i ditt projekt; använd rätt knapptyp när du lägger till den i ett formulär.
cta-button.css
Det nedladdade filnamnet följer klassnamnet.
Vanliga frågor
Behöver jag ett CSS-ramverk?
Nej. Utdata är standard CSS plus en vanlig HTML-knapp. Klistra in CSS i din egen stilmall och använd matchande klass på knappen.
Sparar Download även HTML?
Download sparar en .css-fil uppkallad efter klassen. Kopiera knappmarkeringen separat från fliken HTML.
Kan jag ge varje hörn en annan radie?
Ja. I Shape, stäng av Link all corners, ställ sedan in Top left, Top right, Bottom right och Bottom left oberoende av varandra. Detta exempel håller dem länkade för en pillerform.
Kommer min design att finnas kvar nästa gång?
Studion försöker spara det aktuella utkastet i webbläsarens lokala lagring. Det är inte ett konto eller en säkerhetskopia mellan enheter. Webbläsarinställningar, rensning av webbplatsdata eller Återställ kan ta bort eller ersätta det, så exportera arbete du vill behålla.
Laddas min knapp upp till en server?
Förhandsgranskningen av stilen och genereringen av CSS/HTML körs i din webbläsare. Editorn laddar inte upp din knapptext eller ditt stilutkast för att skapa exporten.
Ge din nästa knapp en egen stil.
Välj en utgångspunkt, justera detaljerna och för in koden i ditt projekt.