CSS Schaltflächen Generator

Einstellungen

20px
10px
8px
16px
0px

Vorschau & CSS

 
   
 
 
   
 
 
 
Anleitung
 
     
  1. Farben wählen — Hintergrund- und Textfarbe mit den Farbwählern festlegen.
    2.  
  2. Abstände anpassen — Innenabstand X und Y mit den Schiebereglern einstellen.
    3.  
  3. Form bestimmen — Rahmenradius von 0 (eckig) bis 50px (Pille) einstellen.
    4.  
  4. Rahmen hinzufügen — Rahmenbreite erhöhen und Rahmenfarbe wählen für einen Outline-Stil.
    5.  
  5. Schatten wählen — Zwischen Kein, Weich und Stark wechseln.
    6.  
  6. CSS kopieren — Auf „CSS kopieren" klicken und in das Stylesheet einfügen.
    7.  
 
 
 
Was ist ein CSS Schaltflächen Generator?
 
Ein CSS Schaltflächen Generator ermöglicht das visuelle Gestalten von Button-Styles ohne manuelles Schreiben von Code. Alle visuellen Eigenschaften — Farbe, Größe, Form, Schatten — werden eingestellt, und das Tool gibt fertiges CSS aus.
 
Das generierte CSS verwendet Standardeigenschaften: background, color, padding, border-radius, border, box-shadow und cursor: pointer.
 
 
 
Häufige Anwendungsfälle
 
 
CTA-Schaltflächen
 
Formular-Absenden
 
Navigationslinks
 
Karten-Aktionen
 
Outline-Schaltflächen
 
Pillenförmige Umschalter
 
 
Tipps & Best Practices
 
 
 Kontrastverhältnis 
Die Textfarbe sollte mindestens 4,5:1 Kontrast zum Hintergrund haben, um WCAG AA-Barrierefreiheit zu erfüllen.
 
 
 Konsistente Abstände 
Ein Verhältnis von 2:1 (horizontal:vertikal) beim Innenabstand ist ein guter Ausgangspunkt für ausgewogene Schaltflächen.
 
 
 Hover-Zustände 
Eine :hover-Regel mit dunklerem Hintergrund oder veränderten Schatten gibt Benutzern klares visuelles Feedback.
 
 
 Fokus-Stile 
Ein sichtbarer :focus-visible-Rahmen ist für die Tastaturnavigation und Barrierefreiheit unerlässlich.
 
 
 
Häufig gestellte Fragen
 
 
Wie füge ich einen Hover-Effekt hinzu?
 
Das generierte CSS kopieren und eine .button:hover { background: #dunklereFarbe; }-Regel hinzufügen. filter: brightness(0.9) ist eine schnelle Lösung zum Abdunkeln.
 
 
 
Können diese Styles in React oder Vue verwendet werden?
 
Ja. Die Ausgabe ist reines CSS, das überall funktioniert — in CSS-Modulen, styled-components oder Tailwind-Arbitrary-Values.
 
 
 
Was bewirkt border-radius: 50px bei einer Schaltfläche?
 
Ein Rahmenradius, der die halbe Schaltflächenhöhe übersteigt, erzeugt eine vollständig pillenförmige Schaltfläche. Kleinere Werte runden die Ecken teilweise ab.
 
 
 
Welchen Schatten sollte ich wählen?
 
Weich eignet sich für subtile Erhebung auf hellen Hintergründen. Stark funktioniert für Hero-CTAs. Kein Schatten ist ideal für flache Design-Systeme.