Dette eksempel bruger kun generatorens kontroller. Billederne ovenfor viser faktiske downloadede stylesheets anvendt på almindelige HTML-knapper, ikke skærmbilleder af editoren.
Start med Signature
Åbn CSS-knapgeneratoren. Under Presets skal du vælge Signature fra Everyday-samlingen. Indstil knapteksten til “Get started”. I kodeområdet skal du indstille klassenavnet til cta-button.
En forudindstilling erstatter standard- og hover-stile, mens din etiket og dit klassenavn forbliver. Vælg dit udgangspunkt, før du foretager detaljerede justeringer.
Klassenavnet forbinder CSS-reglerne med din HTML-knap. Generatoren renser ikke-understøttede tegn; brug et kort, karakteristisk navn for at undgå at style urelaterede elementer.
Opret gradient-pillen
Behold redigeringstilstanden på Default. Under Text skal du vælge System sans, skriftstørrelse 18 px og vægt Bold. Behold den hvide tekstfarve, normal stil, centreret justering og linjehøjde 1.4.
Under Fill skal du vælge Linear gradient. Brug de to farver og vinklen nedenfor. Indstil vandret polstring til 32 px og lodret polstring til 16 px. Under Shape skal du beholde Link all corners aktiveret og indstille hjørneradius til 100 px. Kantbredden forbliver 0 px.
Under Shadow skal du beholde Box shadow aktiveret. Brug vandret forskydning 0 px, lodret forskydning 8 px, sløring 24 px, spredning −4 px, farve #460BD8 og opacitet 32%. Lad Inset shadow og Text shadow være slået fra.
Polstring ændrer pladsen omkring teksten. Hjørneradius ændrer omridset. En stor radius skaber denne pilleform uden at gøre etiketten bredere.
Giv hover sin egen behandling
Skift redigeringstilstand til Hover. Under Fill skal du ændre baggrundsfarven til #33099E og den anden farve til #6D20BF. Behold gradientvinklen på 135°. Under Shadow skal du ændre lodret forskydning til 10 px og sløring til 28 px. Lad de andre indstillinger være uændrede.
Brug lærredets Default-, Hover- og Active-knapper til at inspicere hver tilstand. Du kan også holde musen over eller trykke på eksempelknappen. Skift lærredet mellem lyst og mørkt for at gennemgå dets kant og skygge.
Redigeringstilstand vælger, hvilke stile du ændrer. Lærredstilstanden ændrer kun, hvad du får vist. Vend tilbage til Default-redigering, før du justerer det hvilende udseende.
Hover-egenskaber, der stadig matcher standarden, følger senere standardredigeringer. Når du først har tilpasset en hover-egenskab, forbliver den uafhængig. Tjek begge tilstande igen, efter du har ændret basistilen.
Eksportér og test på din side
Vælg CSS-fanen og brug Copy CSS, eller vælg Download for at gemme cta-button.css. Vælg HTML-fanen og kopiér den matchende knap-markup. HTML inkluderer det samme klassenavn og en knap med type="button".
Tilføj CSS til dit stylesheet, eller link den downloadede fil fra din side. Placer HTML, hvor knappen hører til. De to eksportfiler fungerer sammen: en HTML-knap alene inkluderer ikke sin styling.
Åbn siden og test dens standard-, hover-, tastaturfokus- og trykte tilstande. Eksporten inkluderer en focus-visible-kontur, en lille aktiv bevægelse og en regel for reduceret bevægelse. Dine omkringliggende stile og installerede skrifttyper kan stadig påvirke resultatet.
Den genererede knap er et styret element. Forbind dens klik-adfærd i dit projekt; brug den korrekte knaptype, når du tilføjer den til en formular.
cta-button.css
Det downloadede filnavn følger klassenavnet.
Almindelige spørgsmål
Har jeg brug for et CSS-framework?
Nej. Outputtet er standard CSS plus en almindelig HTML-knap. Indsæt CSS i dit eget stylesheet og brug den matchende klasse på knappen.
Gemmer Download også HTML?
Download gemmer en .css-fil opkaldt efter klassen. Kopiér knap-markuppen separat fra HTML-fanen.
Kan jeg give hvert hjørne en forskellig radius?
Ja. Under Shape skal du slå Link all corners fra og derefter indstille Top left, Top right, Bottom right og Bottom left uafhængigt. Dette eksempel holder dem forbundet for en pilleform.
Vil mit design stadig være her næste gang?
Studiet forsøger at gemme det aktuelle udkast i denne browsers lokale lager. Det er ikke en konto eller backup på tværs af enheder. Browserindstillinger, sletning af webstedsdata eller Nulstil kan fjerne eller erstatte det, så eksportér det arbejde, du vil beholde.
Bliver min knap uploadet til en server?
Styling-eksemplet og CSS/HTML-genereringen kører i din browser. Editoren uploader ikke din knaptekst eller dit styling-udkast for at oprette eksporten.
Giv din næste knap sin egen stil.
Vælg et udgangspunkt, juster detaljerne, og bring koden ind i dit projekt.