CSS Button Generator
Generera stilade knappar med CSS-kod
Titel
Beskrivning
.click-me {
padding: 12px 18px;
font-size: 16px;
font-weight: 600;
border-radius: 4px;
border: none;
background-color: #3B82F6;
color: #FFFFFF;
cursor: pointer;
}
.click-me:hover {
background-color: #2563EB;
}Designa anpassade knappar med CSS-stil med vår knappgenerator. Skapa stiliserade knappar med färger, storlekar, ramar och svävningseffekter för dina webbprojekt.
Key Features
Anpassningsbar knapptext och stil
Färgväljare för bakgrunds- och textfärger
Justerbar stoppning, teckenstorlek och ramradie
Teckensnittsvikt och stilalternativ
Kantstil (ingen, solid, streckad, prickad)
Hover effekt färgval
Knappgenerator
Ange knapptext
Skriv etiketttexten som du vill ska visas på din knapp
Anpassa färger
Använd färgväljare för att ställa in bakgrunds-, text- och svävfärger
Justera mått
Ställ in stoppning, teckenstorlek och kantradie för storlek
Lägg till styling
Välj teckensnittsvikt och välj kantstil om så önskas
Kopiera CSS
Klicka på Kopiera för att få CSS-koden för din formaterade knapp
Use Cases
Skapa uppmaningsknappar för målsidor
Designa konsekventa knappstilar för webbapplikationer
Bygg knappars svävningslägen för interaktiv feedback
Prototyping av UI-komponenter för designsystem
Frequently Asked Questions
Kan jag skapa olika knapptillstånd?
Ja, generatorn skapar automatiskt både normal- och svävtillstånds-CSS
Vilka CSS-klasser genereras?
Verktyget genererar semantiska klassnamn baserat på din knapptext
Kan jag anpassa kantstilar?
Ja, välj mellan ingen, heldragen, streckad, prickad eller dubbla kanter med anpassad bredd
Är koden produktionsklar?
Ja, all genererad CSS är optimerad och redo att användas i produktionen
Tool Information
Related Tools You Might Like
Färgpalettgenerator från bild
Extrahera dominerande färger från en bild
RGB/HEX Converter
Konvertera mellan RGB och HEX färgformat
CSS Gradient Generator
Skapa anpassade CSS-gradienter med förhandsgranskning
WCAG Contrast Checker
Kontrollera färgkontrast enligt WCAG-standarder
Digital Signature Generator
Skapa stiliserade digitala signaturer med olika teckensnitt
Box Shadow Generator
Generera CSS box skuggor
Surfboard volymkalkylator
Beräkna den perfekta surfbrädan volym baserat på din vikt, erfarenhet nivå och våg förhållanden.
Wave Height Converter
Konvertera mellan olika våghöjdmätningar (ansiktshöjd, Hawaiianska skala, havet svullna).
Scuba Dive Planner
Planera ditt dyk med djupgränser, bottentid och säkerhetsdekompressionskrav.