CSS-Button-Generator
Beginne mit einem fertigen Stil und passe Farbe, Größe, Ecken und Schatten an. Fahre mit der Maus darüber und klicke in der Vorschau, um die Effekte zu sehen, und kopiere dann den Code.
So geht’sSchöne Buttons in CSS
Verfügbar auf: 
CSS-Button-Generator: wofür es gut ist
Wähle einen fertigen Stil (einfarbig, Pille, Kontur, Verlauf oder eckig) und passe Text, Farben, Schriftgröße, Abstand, Ecken, Schatten, Schriftstärke und den Effekt beim Darüberfahren mit der Maus an (aufsteigen, abdunkeln oder vergrößern). Die Vorschau funktioniert wirklich: Fahre mit der Maus darüber und klicke.
Das CSS enthält einen sichtbaren Fokus für die Tastatur, den Hover-Effekt nur auf Geräten mit Maus und eine leichte Verkleinerung beim Klicken. Das Tool zeigt den Kontrast zwischen Text und Hintergrund und warnt, wenn er unter 4,5:1 liegt.
So geht’s
- Wähle einen fertigen Stil.
- Passe Farben, Größe, Ecken, Schatten und Effekt an.
- Prüfe den Kontrast und kopiere CSS und HTML.
Wann nutzen
- Call-to-Action-Buttons auf Landingpages.
- Die Buttons einer Website vereinheitlichen.
- CSS lernen, indem man das Ergebnis sieht.
Häufige Fragen
Ist der Button barrierefrei?
Der Code nutzt das Tag button (oder a), behält die sichtbare Fokuskontur mit :focus-visible bei, und das Tool warnt, wenn der Kontrast zwischen Text und Hintergrund unter 4,5:1 liegt, dem WCAG-Minimum für normalen Text.
Warum erscheint der Hover-Effekt nur am Computer?
Der Hover steht in @media (hover: hover), weil auf dem Handy die Berührung einen falschen Hover auslöst, der am Button hängen bleibt. Der Klickeffekt (:active) funktioniert auf allen Geräten.
Kann ich den Code für einen Link nutzen?
Ja. Ersetze <button> durch <a href="..."> und behalte die Klasse; das CSS enthält schon display:inline-flex und text-decoration:none für beide Fälle.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.