Generator für animierte Buttons

Gestalte leuchtende, Neon- und 3D-Buttons mit Live-Hover-Vorschau und kopiere dann HTML und CSS

100 % kostenlos. Läuft vollständig in deinem Browser: deine Dateien und Daten verlassen dein Gerät nie, und es wird nichts auf einen Server hochgeladen.

State

Export

Hover and click the live button. Magnetic, ripple and explosion also ship a tiny vanilla script.

/* Animated button - generated by 500 Toolbox */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,500,0,0");
.tb-btn {
  --bg: #7c3aed; --fg: #fff; --hov: #a855f7; --bd: 0px solid transparent;
  --r: 14px; --sh: none; --spd: 280ms; --int: 70;
  --w: 220px; --h: 52px; --pad: 18px; --fs: 16px; --ff: system-ui, sans-serif;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: var(--w);
  height: var(--h)
…

Jump to the next useful tool without leaving your flow.

See more

Über dieses Tool

Buttons leisten mehr Arbeit als jedes andere Steuerelement auf einer Seite, und ein langweiliger wird ignoriert. Dieser Generator gibt dir Glow, Neon, Ripple, Magnetic, 3D-Press, Glitch und mehr, mit Live-Hover und Klick auf den echten Button. Ändere Typ, Farbe, Radius und Tempo, dann kopiere HTML und CSS, das du in jedes Projekt einfügen kannst. JavaScript ist nur für Effekte dabei, die es brauchen, etwa Magnetic-Tracking oder ein Ripple.

So verwendest du dieses Tool

  1. Einen Effekt wählenHover-Glow, Neon, Shine, Ripple, 3D-Press, Pulse, Glitch und der Rest.
  2. Den Button anpassenBearbeite Beschriftung, Farben, Größe, Radius, Schatten und Animationsgeschwindigkeit. Vorschau von Hover, Active, Disabled, Loading und Success.
  3. Den Code kopierenKopiere HTML und CSS. Magnetic, Ripple und Explosion bieten auch JavaScript. ZIP-Download ist verfügbar.

Animierte Buttons, die barrierefrei bleiben

Halte den Textkontrast in jedem Zustand hoch, sorg dafür, dass der Button auch ohne Animation wie ein Button aussieht, und halte Effekte kurz – unter etwa einer halben Sekunde.

Respektiere die Einstellung für reduzierte Bewegung: Pack große Bewegungen in eine prefers-reduced-motion-Media-Query, damit Menschen, denen bei Bewegung übel wird, eine ruhigere Version sehen.

Warum es nutzen

  • Einundzwanzig Animations-Templates, vom ruhigen Shine bis Neon und Glitch.
  • Du kannst den tatsächlichen Button in der Vorschau hovern und klicken.
  • Der Export ist sauberes CSS. Extra-JavaScript nur, wenn der Effekt es braucht.
  • Zufälliges Design wendet mit einem Klick eine brauchbare Kombination an.

Häufige Anwendungen

  • Ein primärer CTA mit weichem Glow auf einer Marketingseite.
  • Ein Neon-Button für eine dunkle Produkt-UI.
  • Ein Ripple auf einem Formular-Submit, damit der Klick anerkannt wirkt.

Fehler, die du vermeiden solltest

  • box-shadow oder width bei Hover zu animieren. Beides erzwingt Layout- oder Paint-Arbeit in jedem Frame - animiere stattdessen transform und opacity.
  • Den Fokusring wegen des Looks zu entfernen. Tastatur-Nutzer sehen dann nicht, auf welchem Button sie sind; gestalte :focus-visible um, statt ihn zu löschen.
  • Einen Glow- oder Neon-Effekt auf hellem Hintergrund zu nutzen, wo die Farbe nichts hat, in das sie bluten kann, und nur matschig wirkt.
  • Eine 600-ms-Transition auf eine primäre Aktion zu setzen. Alles über etwa 250 ms lässt einen Klick unreagierend wirken.
  • Disabled- und Loading-Zustände zu vergessen, sodass ein Formular zweimal abgeschickt werden kann, bevor die erste Anfrage zurückkommt.

Häufig gestellte Fragen

Nein. Die meisten sind nur CSS. Magnetic, Ripple und Klick-Explosion fügen ein kurzes Skript hinzu. JS kopieren ist verborgen, außer der aktuelle Effekt braucht es.

Ja. Beschriftung, optionales Icon, Farben, Größe und Radius aktualisieren die Live-Vorschau und das exportierte Snippet.

Das erzeugte CSS ist klein. Vermeide, viele Explosions- oder Glitch-Buttons auf einer Ansicht zu stapeln, wenn du sehr schwache Handys anpeilst.

Halte den Text mit gutem Kontrast lesbar, sorg für einen sichtbaren Fokusstil für Tastaturnutzer und berücksichtige prefers-reduced-motion, indem du Animationen für Menschen, die weniger Bewegung wünschen, reduzierst oder entfernst.

Dezente Effekte wie ein weiches Leuchten, ein leichtes Anheben oder ein Ripple beim Klick ziehen Aufmerksamkeit, ohne abzulenken. Glitch- und starke Neoneffekte eignen sich eher für verspielte Marken oder Landingpages.

Füg das CSS in den Bereich für eigenes CSS deines Themes ein und das HTML in einen benutzerdefinierten HTML-Block oder ein Embed. Ergänze das JavaScript-Snippet im Footer-Code-Bereich, wenn der Effekt es braucht.