Dette eksemplet bruker kun generatorens kontroller. Bildene ovenfor viser faktiske nedlastede stilark brukt på vanlige HTML-knapper, ikke skjermbilder av editoren.
Start med Signature
Åpne CSS-knappgeneratoren. Under forhåndsinnstillinger velger du Signature fra Everyday-samlingen. Sett knappetekst til “Get started”. I kodeområdet setter du klassenavn til cta-button.
En forhåndsinnstilling erstatter standard- og svevestiler, mens etiketten og klassenavnet ditt forblir uendret. Velg utgangspunkt før du gjør detaljerte justeringer.
Klassenavnet kobler CSS-reglene til HTML-knappen din. Generatoren renser tegn som ikke støttes; bruk et kort, distinkt navn for å unngå å stilsette urelaterte elementer.
Lag gradient-pillen
Hold redigeringstilstand på Default. Under tekst velger du System sans, skriftstørrelse 18 px og vekt Bold. Behold hvit tekstfarge, normal stil, sentrert justering og linjehøyde 1.4.
Under fyll velger du Linear gradient. Bruk de to fargene og vinkelen nedenfor. Sett horisontal utfylling til 32 px og vertikal utfylling til 16 px. Under form beholder du Link all corners aktivert og setter hjørneradius til 100 px. Kantbredden forblir 0 px.
Under skygge beholder du Box shadow aktivert. Bruk horisontal forskyvning 0 px, vertikal forskyvning 8 px, uskarphet 24 px, spredning −4 px, farge #460BD8 og opasitet 32%. La Inset shadow og Text shadow være av.
Utfylling endrer plassen rundt teksten. Hjørneradius endrer omrisset. En stor radius skaper denne pilleformen uten å gjøre etiketten bredere.
Gi svevetilstand sin egen behandling
Bytt redigeringstilstand til Hover. Under fyll endrer du bakgrunnsfarge til #33099E og andre farge til #6D20BF. Behold gradientvinkelen på 135°. Under skygge endrer du vertikal forskyvning til 10 px og uskarphet til 28 px. La de andre innstillingene være uendret.
Bruk knappene Default, Hover og Active på lerretet for å inspisere hver tilstand. Du kan også holde musen over eller trykke på forhåndsvisningsknappen. Bytt lerretet mellom lyst og mørkt for å se kanten og skyggen.
Redigeringstilstand velger hvilke stiler du endrer. Lerrets-tilstand endrer bare hva du forhåndsviser. Gå tilbake til Default-redigering før du justerer utseendet i hviletilstand.
Sveveegenskaper som fortsatt samsvarer med standarden følger senere standardendringer. Når du tilpasser en sveveegenskap, forblir den uavhengig. Sjekk begge tilstander på nytt etter at du har endret grunnstilen.
Eksporter og test på siden din
Velg CSS-fanen og bruk Copy CSS, eller velg Download for å lagre cta-button.css. Velg HTML-fanen og kopier den tilhørende knappemarkeringen. HTML inkluderer samme klassenavn og en knapp med type="button".
Legg CSS til i stilarket ditt, eller koble til den nedlastede filen fra siden din. Plasser HTML der knappen skal være. De to eksportene fungerer sammen: en HTML-knapp alene inkluderer ikke stilsettingen sin.
Åpne siden og test standard-, sveve-, tastaturfokus- og trykketilstander. Eksporten inkluderer en focus-visible-kontur, en liten aktiv bevegelse og en regel for redusert bevegelse. Dine omkringliggende stiler og installerte fonter kan fortsatt påvirke resultatet.
Den genererte knappen er et stilsett kontroll-element. Koble klikkoppførselen i prosjektet ditt; bruk riktig knappetype når du legger den til i et skjema.
cta-button.css
Det nedlastede filnavnet følger klassenavnet.
Vanlige spørsmål
Trenger jeg et CSS-rammeverk?
Nei. Resultatet er standard CSS pluss en enkel HTML-knapp. Lim inn CSS i ditt eget stilark og bruk den tilhørende klassen på knappen.
Lagrer Download HTML også?
Download lagrer en .css-fil oppkalt etter klassen. Kopier knappemarkeringen separat fra HTML-fanen.
Kan jeg gi hvert hjørne en forskjellig radius?
Ja. Under form slår du av Link all corners, og setter deretter Top left, Top right, Bottom right og Bottom left uavhengig. Dette eksemplet holder dem koblet for en pilleform.
Vil designet mitt fortsatt være her neste gang?
Studioet prøver å lagre gjeldende utkast i denne nettleserens lokale lagring. Dette er ikke en konto eller sikkerhetskopi på tvers av enheter. Nettleserinnstillinger, sletting av nettstedsdata eller tilbakestilling kan fjerne eller erstatte det, så eksporter arbeid du vil beholde.
Blir knappen min lastet opp til en server?
Forhåndsvisning av stil og generering av CSS/HTML kjøres i nettleseren din. Redigeringsprogrammet laster ikke opp knappeteksten eller stilutkastet ditt for å opprette eksporten.
Gi din neste knapp sin egen stil.
Velg et utgangspunkt, juster detaljene og ta med koden inn i prosjektet ditt.