So nutzt du: CSS-Buttons
- Fahre über die Buttons und klicke den Stil an, der dir gefällt.
- Lege deine Farben, Größe, Eckenradius und Tempo fest sowie die Zustände Hover, Gedrückt und Geklickt. Jeder Stil aktualisiert sich live.
- Kopiere das CSS und HTML oder nutze Alles kopieren für einen einzigen Block.
- Für Webflow klickst du auf Für Webflow kopieren und fügst den Code mit Strg/⌘+V im Designer ein.
Hover-Effekte, die leichtgewichtig bleiben
Jeder Stil hier ist reines CSS, nur ein Linien-Sweep-Stil fügt ein kleines Inline-SVG hinzu. Keine Bibliothek und kein JavaScript. Farben sind Custom Properties am Anfang der Regel. Einen Button später umzufärben heißt also, zwei oder drei Werte zu ändern.
- Tastaturnutzer bekommen bei jedem Stil einen sichtbaren
:focus-visible-Ring. - Reduzierte Bewegung wird respektiert: Die Bewegung wird für Besucher abgeschaltet, die weniger Animation wünschen.
- Links oder Buttons: Nutze
<a>, um irgendwohin zu verlinken, und<button>, um etwas auszulösen. Das CSS funktioniert bei beiden.
Hover-, Gedrückt- und Geklickt-Zustände
Jeder Button hat eine :hover-Textfarbe sowie eine :active-Farbe und -Größe für den gedrückten Zustand. Aktiviere den Geklickt-Zustand, um eine .is-clicked-Klasse mit einem kurzen Script hinzuzufügen. Das passt zu Like-, Speichern- oder Folgen-Buttons. Wähle rem, um die Größe relativ zur Root-Schriftgröße festzulegen (Browser-Standard 16px angenommen). Dünne 1px- und 2px-Linien bleiben in Pixeln, damit sie scharf bleiben.
Einen Stil in Webflow verwenden
Für Webflow kopieren fügt ein Embed-Element mit den Styles und dem Button ein. Webflow kann Pseudo-Element-Animationen nicht im Style-Panel bauen, daher hält ein Embed den Effekt exakt. Um eigene Buttons zu stylen, lege das CSS im Custom Code deiner Website ab und vergib die Klasse.
Willst du einen Button von Grund auf bauen? Nutze den CSS Button Generator. Prüfe die Lesbarkeit der Schrift mit dem Kontrast-Checker und schau dir die Hamburger-Menü-Icons für animierte Menü-Buttons an.
Auch gesucht als: css button styles, css button hover effekte, animierte css buttons, button hover animation css, css buttons kopieren, webflow button hover, coole css buttons, button rahmen animation css.
Passende Tools zu: CSS-Buttons
- CSS Hover-Animation Generator — Gestalte Hover-Animationen für Buttons, Karten, Links und Icons.
- CSS Verlauf Generator — Gestalte einen Verlauf visuell: Farbstopps ziehen, Winkel oder Typ ändern, mit einer Vorlage starten.
- Box-Shadow-Generator — Stapel mehrere Schatten-Ebenen, passe Versatz, Weichzeichnung, Ausbreitung und Deckkraft auf einer Live-Karte an und kopiere das CSS für box-shadow oder text-shadow.
- CSS-Animation-Generator — Gestalte CSS-Animationen auf einer echten Keyframe-Timeline.