CSS-Button-Generator

Q: Kann ich das CSS auch für Links verwenden?

Ja. Die Klasse funktioniert für und . Der Generator setzt text-decoration: none und display: inline-block, damit Links wie Buttons aussehen.

Der CSS-Button-Generator gestaltet Buttons mit Farben, Abständen, runden Ecken, Hover und Fokus in einer Live-Vorschau und prüft dabei den Kontrast der Beschriftung.

Vorlage

Beschriftung

Klassenname

Hintergrundfarbe

Textfarbe

Hintergrund bei Hover

Innenabstand oben/unten (px)

Innenabstand links/rechts (px)

Eckenradius (px)

Schriftgröße (px)

Schriftstärke

Rahmenbreite (px)

Textfarbe bei Hover

Rahmenfarbe

Schatten

Übergang (ms)

Hintergrund transparent (für Umriss und Ghost)

Vorschau: mit der Maus darüberfahren, per Tabulatortaste fokussieren oder klicken.

CSS

HTML

Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

Buttons mit CSS gestalten

Der CSS-Button-Generator erzeugt den Code für einen Button samt Zuständen: normal, Hover-Effekt beim Überfahren mit der Maus, focus-visible für die Tastaturbedienung, gedrückt (active) und deaktiviert. Sie stellen Farben, Innenabstand, Eckenradius, Schrift und Rahmen ein, sehen das Button-Design sofort in der Vorschau und kopieren fertiges Button CSS mit einer eigenen Klasse. Zusätzlich setzt der Generator Zeilen wie font: inherit, cursor: pointer und appearance: none, damit der Button in allen Browsern gleich aussieht.

Zur Barrierefreiheit prüft das Werkzeug das Kontrastverhältnis zwischen Text- und Hintergrundfarbe nach WCAG 2: Für normale Schrift sind mindestens 4,5 : 1 nötig, für große oder fette Schrift ab etwa 18,66 px fett 3 : 1. Der Kontrast wird auch für den Hover-Zustand berechnet. Der Fokusrahmen nutzt :focus-visible, erscheint also bei Tastaturnutzung, nicht aber nach jedem Mausklick, und hat einen Abstand zum Button (outline-offset), damit er auf jedem Hintergrund sichtbar bleibt.

Ein Tipp für stimmige Seiten: Legen Sie wenige Varianten fest, etwa einen gefüllten Primär-Button, einen Umriss-Button für Nebenaktionen und einen Text-Button, und verwenden Sie diese überall. Weichere Schatten erzeugen Sie mit dem Box-Shadow-Generator, Farben mit genug Kontrast finden Sie mit dem Kontrastprüfer.

Anleitung: CSS-Button-Generator in 4 Schritten

Unter „Vorlage“ einen Stil wie „Gefüllt“, „Umriss“ oder „Pille“ wählen.
Beschriftung, Hintergrundfarbe, Textfarbe, Innenabstand und Eckenradius anpassen; die Vorschau ändert sich sofort.
Die Hover-Farbe festlegen und die Kontrastwerte unter der Vorschau prüfen.
Den Klassennamen eintragen und CSS sowie HTML kopieren.

Typische Anwendungsfälle

Einen einheitlichen Primär- und Sekundär-Button für eine Website ohne CSS-Framework bauen.
Für eine Landingpage einen auffälligen Call-to-Action-Button mit gut sichtbarem Fokus erstellen.
Prüfen, ob eine Markenfarbe als Button-Hintergrund mit weißer Schrift genug Kontrast hat.
Button-Stile für E-Mail-Vorlagen oder statische Seiten schnell zusammenstellen.

Fragen

Häufige Fragen

Wie groß sollte ein Button sein?

Für Touch-Bedienung mindestens etwa 44 × 44 CSS-Pixel Trefferfläche, wie es WCAG 2.5.5 (AAA) empfiehlt; WCAG 2.2 verlangt für Stufe AA mindestens 24 × 24 Pixel. Mit 12 px Innenabstand oben und unten bei 16 px Schrift erreichen Sie gut 44 px Höhe.

Warum sollte ich outline nicht einfach entfernen?

Der Fokusrahmen zeigt Tastaturnutzern, wo sie sich befinden. Wer outline: none setzt, muss einen gleichwertigen Ersatz liefern. Mit :focus-visible bleibt der Rahmen für Tastaturnutzer, ohne Mausnutzer zu stören.

Wie mache ich einen Button mit Hover-Effekt barrierefrei?

Der Hover-Zustand darf keine Informationen tragen, die sonst fehlen, und muss selbst genug Kontrast haben. Der Generator prüft deshalb beide Farbpaare.

Kann ich das CSS auch für Links verwenden?

Ja. Die Klasse funktioniert für

Sollte ich für Buttons <button> oder <a> verwenden?

<button> für Aktionen auf der Seite (Formular senden, Dialog öffnen), <a href> für Navigation zu einer anderen Adresse. Beide lassen sich mit derselben Klasse gleich gestalten; die Semantik entscheidet über Tastaturbedienung und Screenreader-Ansage.

Warum sieht mein Button auf dem iPhone anders aus?

Safari gibt Formular-Buttons eigene Standardstile. Mit appearance: none, einer festen Schriftfamilie (font: inherit) und einem eigenen border-radius sieht der Button überall gleich aus. Der Generator setzt diese Zeilen bereits.

Weitere Werkzeuge