CSS-Button-Generator
Ein CSS-Button-Generator macht aus visuellen Einstellungen eine fertige Regel zum Einfügen. Ein Button braucht nur background-color, color, padding und border-radius; der Rahmen ist optional, und padding wird erst vertikal, dann horizontal geschrieben. Beispiel: padding: 12px 24px; border-radius: 8px; background-color: #2563eb; color: #ffffff ergibt einen abgerundeten blauen Button, dessen Beschriftung mit 5,17:1 die WCAG-Stufe AA erreicht.
Vorschau
Barrierefreiheits-Check
Anpassen
Schnelle Vorlagen
Generierter Code
Beliebte Werkzeuge
Über CSS-Button-Generator
Der CSS-Button-Generator macht aus einer Handvoll Regler und Farbwähler genau die eine CSS-Regel, die ein Button wirklich braucht. Sie legen die Beschriftung fest, Hintergrund- und Textfarbe, Schriftgröße und Schriftstärke, horizontalen und vertikalen Innenabstand, den Eckenradius, Rahmenbreite und Rahmenfarbe sowie eine von vier Schattentiefen; eine optionale zweite Farbe macht aus der flachen Füllung einen linearen Verlauf über 135 Grad. Die Vorschau steht über den Reglern und ist ein echter HTML-Button mit Ihren Werten in der Größe, in der er auf Ihrer Seite erscheinen wird - was Sie hier freigeben, ist genau das, was Sie ausliefern.
Zwei Dinge machen die Ausgabe brauchbar statt dekorativ. Erstens hat der Codebereich zwei Reiter: eine wiederverwendbare Klasse .btn mit den Regeln :hover, :active, :focus-visible und :disabled für Ihr Stylesheet, und dasselbe button-Element mit allem inline im style-Attribut für Page-Builder, CMS-Blöcke und E-Mail-Vorlagen, die externes CSS entfernen. Zweitens misst das Barrierefreiheitsfeld das Farbpaar nach WCAG 2.2 und meldet das Kontrastverhältnis mit dem Urteil AAA, AA oder Verstoß, wobei es auf die Schwellen für großen Text umschaltet, sobald Schriftgröße und -stärke das rechtfertigen. Es meldet außerdem die dargestellte Höhe - zweimal der vertikale Innenabstand, plus zweimal der Rahmen, plus das 1,2-fache der Schriftgröße, der Zeilenabstand, den die Regel festschreibt, damit der Button auf dem Bildschirm exakt so hoch ist wie angegeben - gemessen an den Zielgrößen 24 x 24 und 44 x 44 CSS-Pixel aus den Kriterien 2.5.8 und 2.5.5.
Ein Verlauf wird gegen beide Stopps geprüft, angezeigt wird das schlechtere der beiden Verhältnisse. Die acht Vorlagen - Primär, Gefahr, Erfolg, Umriss, Pillenform, Verlauf, Dezent und Neon - sind Startpunkte und kein Endzustand: eine anklicken und weiter an den Reglern ziehen. Keine Farbe, keine Beschriftung und keine Reglerstellung wird irgendwohin gesendet; Kontrastrechnung, Vorschau und Code entstehen in der Seite selbst, deshalb aktualisiert sich das Verhältnis mit demselben Tastendruck, der den Button neu zeichnet. Was Sie kopieren, ist eine einzige Klasse ohne zu installierendes Framework, ohne Build-Schritt und ohne Laufzeitskript.
Anwendungsfälle
Anleitung
Tragen Sie unter Button-Text die gewünschte Beschriftung ein und legen Sie anschließend Hintergrund- und Textfarbe über die Farbfelder oder durch Eingabe der HEX-Codes daneben fest.
Ziehen Sie die Regler für Schriftgröße, Innenabstand horizontal, Innenabstand vertikal und Randradius, um den Button zu formen, und erhöhen Sie für eine Umriss-Optik die Rahmenbreite und wählen Sie eine Randfarbe.
Wählen Sie als Schriftstärke Normal, Mittel, Halbfett oder Fett und als Schatten Keine, Klein, Mittel oder Groß.
Aktivieren Sie Verlauf und wählen Sie die zweite Farbe, damit der Hintergrund in einen diagonalen Zweifarbverlauf übergeht.
Klicken Sie unter Schnelle Vorlagen auf eine Karte wie Primär, Umriss, Pillenform, Verlauf, Dezent oder Neon, um einen fertigen Stil zu laden, den Sie weiter anpassen können.
Prüfen Sie den Button im Bereich Vorschau, wechseln Sie bei der Ausgabe zum Reiter CSS oder HTML + CSS und klicken Sie im Codefeld auf das Kopiersymbol.
Profi-Tipps
- Stellen Sie zuerst die Schriftgröße ein. Innenabstand und Eckenradius lassen sich viel besser beurteilen, wenn die Beschriftung ihre endgültige Größe hat, und die Höhenanzeige (2 x vertikaler Innenabstand + 2 x Rahmenbreite + 1,2 x Schriftgröße) wandert mit.
- Erst eine Vorlage laden, dann feinjustieren. Umriss und Dezent starten bereits mit einer Rahmenbreite über null - der schnellste Weg zu einem sekundären Button.
- Tippen Sie Hex-Codes in das Feld neben dem jeweiligen Farbfeld, statt im Farbwähler zu suchen; Vorschau und Kontrastverhältnis aktualisieren sich bei jedem Tastendruck.
- AA-Kontrast gilt für jede Textgröße; nur der Schwellenwert ändert sich — 4,5:1 für normalen Text, 3:1 ab 24px oder ab 18,66px in Fett. Ein Paar mit 3:1 kann auf einem hellen Monitor gut aussehen und im Freien unlesbar sein; behandeln Sie die niedrigere Grenze also als Obergrenze, nicht als Ziel.
- Verläufe werden gegen beide Stopps geprüft und das schlechtere Verhältnis wird angezeigt: Fällt nur ein Ende durch, verschieben Sie diesen Stopp, statt den ganzen Button umzufärben.
Fehlerbehebung
Das kopierte CSS hat auf meiner Seite keine sichtbare Wirkung.
Die Klasse wird überschrieben oder wurde nie gesetzt. Prüfen Sie, dass das Element class="btn" trägt, laden Sie Ihr Stylesheet nach dem Framework-CSS, und öffnen Sie das Styles-Panel in den Entwicklerwerkzeugen: eine durchgestrichene Deklaration bedeutet, dass ein anderer Selektor durch Spezifität oder Reihenfolge gewinnt.
Der Verlauf wirkt flach oder erscheint gar nicht.
Ein Verlauf ist ein Hintergrundbild, keine Hintergrundfarbe. Haken Sie Verlauf an, damit das Werkzeug background: linear-gradient(...) statt background-color ausgibt. Erscheint er weiterhin nicht, suchen Sie nach einer später notierten background-Kurzschreibweise oder einem späteren background-image am selben Element: die Kurzschreibweise setzt background-image auf none zurück und löscht den Verlauf. Eine spätere background-color kann ihn nicht verdecken, denn CSS Backgrounds 3 malt die Farbe unter die Hintergrundbilder.
Das Kontrast-Badge meldet einen Verstoß, der Button sieht für mich aber gut aus.
Kontrast wird über die relative Leuchtdichte gemessen, nicht danach, wie kräftig eine Farbe wirkt. Mitteltonpaare wie #f59e0b mit weißem Text landen trotz leuchtender Wirkung bei etwa 2:1. Dunkeln Sie den Hintergrund ab oder stellen Sie die Beschriftung auf Fast-Schwarz um; das Verhältnis aktualisiert sich beim Tippen.
Häufig gestellte Fragen
Schreiben Sie eine einzige Regel für die Klasse und setzen Sie sechs Deklarationen: background-color, color, font-size, font-weight, padding und border-radius. box-shadow und einen Rahmen fügen Sie nur hinzu, wenn das Design es verlangt. Genau diese Regel schreibt der Generator für Sie: Regler ziehen, Live-Vorschau prüfen, dann den .btn-Block aus dem CSS-Reiter in Ihr Stylesheet kopieren.
Der CSS-Reiter liefert eine wiederverwendbare Klasse .btn samt Zustandsregeln zum Einfügen in ein Stylesheet, sodass sich jeder Button der Website ändert, wenn Sie diesen einen Block bearbeiten. Der Reiter HTML + CSS liefert ein einzelnes button-Element mit denselben Deklarationen inline im style-Attribut - genau das brauchen Page-Builder, CMS-Blöcke und E-Mail-Vorlagen, weil sie externe Stylesheets entfernen. Schreiben Sie es zu einem Link mit href um, wenn der Klick navigiert.
Ziehen Sie den Regler Randradius nach oben. Um 8px herum entsteht das weiche Rechteck, das die meisten Oberflächen verwenden, und oberhalb der halben Buttonhöhe verschmelzen die Ecken zur Pille. Mit der Standardschrift von 16px und 12px vertikalem Innenabstand ist der Button 43px hoch, jeder Radius über etwa 22 sieht also bereits vollständig gerundet aus - und 999px in handgeschriebenem CSS bedeutet dasselbe.
Ja. Bei jeder Änderung von Text- oder Hintergrundfarbe berechnet er das WCAG-Kontrastverhältnis neu und zeigt AAA, AA oder einen Verstoß. Normaler Text braucht 4,5:1 für AA und 7:1 für AAA; Text ab 24px, oder ab 18,66px und fett, gilt als groß und braucht nur 3:1 und 4,5:1. Verlaufsfüllungen werden gegen beide Farbstopps gemessen.
Das Größenfeld meldet die dargestellte Höhe als zweimal den vertikalen Innenabstand, plus zweimal die Rahmenbreite, plus das 1,2-fache der Schriftgröße - der Zeilenabstand, den der Generator in der Regel festschreibt, damit die Zahl zu dem darüber gezeichneten Button passt. WCAG 2.2 Kriterium 2.5.8 verlangt ein Ziel von 24 x 24 CSS-Pixeln, Kriterium 2.5.5 hebt es auf 44 x 44 an. Die Standardschrift von 16px mit 12px vertikalem Innenabstand ergibt 43px und übertrifft das Minimum deutlich.
Nehmen Sie button, wenn der Klick auf der aktuellen Seite wirkt: ein Formular absenden, einen Dialog öffnen, JavaScript ausführen. Es ist standardmäßig fokussierbar, löst mit Enter und Leertaste aus und unterstützt das Attribut disabled. Nehmen Sie einen Link mit href, wenn der Klick zu einer anderen URL führt, damit Mittelklick und «In neuem Tab öffnen» weiter funktionieren. Beide können dieselbe Klasse .btn tragen.
Das erzeugte CSS enthält bereits .btn:hover und .btn:active. Lassen Sie das Kästchen «Focus- und Disabled-Zustände in den Code aufnehmen» angehakt, dann kommen .btn:focus-visible mit einem 3px-Umriss und 2px Abstand sowie .btn:disabled mit halber Deckkraft und cursor: not-allowed hinzu. Löschen Sie einen Fokusumriss nie, ohne ihn durch etwas Sichtbares zu ersetzen, sonst verlieren Tastaturnutzer jede Orientierung.
Ja. Die Ausgabe ist schlichtes CSS ohne Lizenz, ohne Namensnennungspflicht und ohne Laufzeitabhängigkeit, und der Hinweiskommentar in der ersten Zeile darf gelöscht werden. Auch hochgeladen wird nichts: Vorschau, erzeugter Code und Kontrastrechnung entstehen per JavaScript in dieser Seite, Ihre Farben und Beschriftungen erreichen also nie einen Server.
Fast immer sind geerbte Stile die Ursache. Ein Framework-Reset, eine font-family vom Elternelement, eine globale button-Regel oder ein Selektor mit höherer Spezifität können die eingefügte Klasse überschreiben. Laden Sie Ihr Stylesheet nach dem Framework-CSS, halten Sie .btn auf einem einzigen Element, und lesen Sie das Styles-Panel der Entwicklerwerkzeuge: eine durchgestrichene Deklaration verrät genau, welcher Selektor gewonnen hat.