Ein Nutzer scrollt über die Seite, überfliegt Überschriften, Bilder und Listen. Der „Registrieren"-Button verschmilzt mit dem Hintergrund und bleibt unbemerkt. Das darunterliegende Formular verzeichnet seit drei Tagen null Absendungen. Ein klassisches Szenario: Der Button existiert, aber Klicks bleiben aus.

Die Lösung ist kein 500-Euro-Redesign und keine Neufassung der Landingpage. Dreißig Zeilen CSS genügen. Eine dezente Animation (ein Wackeln, Pulsieren oder Leuchten) lenkt den Blick auf den Button, ohne aufdringlich zu blinken. Untersuchungen der Nielsen Norman Group bestätigen, dass bewegte Elemente Aufmerksamkeit dreimal schneller erregen als statische, allerdings nur, wenn die Bewegung begründet ist und nicht mit dem Hauptinhalt konkurriert.

Nachfolgend finden Sie drei funktionierende animierte CTA-Button-Optionen mit einsatzbereitem Code. Vom einfachen Wackeln bis zum kombinierten Pulsieren-Leuchten. Kopieren und einfügen.

💡 Kurzüberblick:

• HTML-Grundgerüst: minimales Button-Markup mit einer Modifikator-Klasse, die sich in jedes Formular oder jede Landingpage einbetten lässt.
• Wackeleffekt: Der Button wackelt alle 4 Sekunden per @keyframes und lenkt die Aufmerksamkeit auf die Hauptaktion, ohne den Nutzer zu irritieren.
• Pulsierender Effekt: ein sanfter Schattenpuls, eine Alternative für Seiten, auf denen Wackeln zu aggressiv wirkt.
• CodePen-Demo: ein Live-Beispiel, in dem Sie Einstellungen anpassen und Ergebnisse sehen können, bevor Sie sie in Ihre Seite übernehmen.

HTML-Markup: animiertes Button-Grundgerüst

Das Markup ist bewusst einfach gehalten. Keine Frameworks, nur reines HTML. Ein Button, eine Klasse.

1
<input type="submit" name="submit" value="Get Ticket!"
2
  class="animated-btn animated-btn--shake">

Drei Punkte sind sofort erwähnenswert. Erstens: type="submit" sorgt dafür, dass der Button in jedem Formular ohne zusätzliches JavaScript funktioniert. Zweitens: value ist der Text, den der Nutzer sieht. Ändern Sie ihn nach Bedarf: „Download", „Registrieren" oder etwas anderes. Drittens: Die Modifikator-Klasse animated-btn--shake steuert den Animationstyp. Ersetzen Sie sie durch --pulse oder --glow, um einen anderen Effekt zu erzielen, ohne das Markup anzufassen.

Wenn Sie den Button außerhalb eines Formulars einfügen, umschließen Sie ihn mit <a href="..."> und ersetzen Sie input durch <button>. Die nachfolgenden Stile funktionieren mit beiden Varianten.

CSS-Animation: Wackeleffekt

Der Wackeleffekt ist der auffälligste der drei Effekte. Der Button ruckelt alle 4 Sekunden um 3 bis 5 Pixel nach links und rechts. Ein Nutzer scrollt über die Seite, nimmt die Bewegung im peripheren Sichtfeld wahr und richtet seinen Blick auf den Button. Vier Sekunden reichen aus, damit die Animation nicht zu störendem Spam wird.

1
/* === Shake button === */
2
.animated-btn--shake {
3
  animation: shake 4s ease-in-out infinite;
4
  transform-origin: center center;
5
}
6
 
7
@keyframes shake {
8
  0%, 100%   { transform: translateX(0); }
9
  2%         { transform: translateX(-4px) rotate(-1deg); }
10
  4%         { transform: translateX(4px) rotate(1deg); }
11
  6%         { transform: translateX(-3px); }
12
  8%         { transform: translateX(3px); }
13
  10%        { transform: translateX(0); }
14
}

Sehen wir uns die zentralen Entscheidungen genauer an. animation: shake 4s ease-in-out infinite: In unserem Beispiel dauert der gesamte Zyklus mehrere Sekunden, aber die Animation ist nur einen kleinen Bruchteil dieser Zeit aktiv. In der übrigen Zeit bleibt der Button still. Das ist wichtig: Dauerhaftes Wackeln irritiert, während dosierte Bewegung Aufmerksamkeit erregt.

transform-origin: center center fixiert den Drehpunkt in der Mitte, damit der Button bei der Drehung nicht seitlich „wegdriftet".

rotate() um 1 Grad sorgt für Realismus. Reines translateX wirkt mechanisch; eine leichte Neigung erzeugt die Illusion physischer Kraft, als hätte jemand an einer Schnur am Button gezogen.

Fügen Sie Styling passend zu Ihrem Design hinzu: Hintergrundfarbe per background, Eckenrundung mit border-radius, Innenabstand und Schriftgröße mit font-size. Die Animation hängt nicht vom Styling ab und funktioniert mit allen Farben und Größen.

Variante: pulsierender Effekt

Wackeln ist nicht überall angebracht. Auf der Website einer konservativen Bank oder einer medizinischen Klinik wirkt ein wackelnder Button fehl am Platz. Der Puls-Effekt bietet eine ruhigere Möglichkeit, Aufmerksamkeit zu lenken: Der Schatten des Buttons dehnt sich sanft aus und zieht sich wieder zusammen, was einen „atmenden" Effekt erzeugt.

1
/* === Pulse button === */
2
.animated-btn--pulse {
3
  animation: pulse 3s ease-in-out infinite;
4
}
5
 
6
@keyframes pulse {
7
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 139, 87, 0.5); }
8
  50%      { box-shadow: 0 0 0 12px rgba(46, 139, 87, 0); }
9
}

Der Schatten breitet sich um 12 Pixel vom Button aus und verblasst zur Transparenz. Der Zyklus dauert 3 Sekunden, etwas schneller als beim Wackeln, weil Pulsieren weniger aufdringlich ist und das Auge einen schnelleren Rhythmus verzeiht.

Setzen Sie in rgba() Ihre eigene Farbe ein. Die Formel: Nehmen Sie die Hauptfarbe des Buttons und setzen Sie deren Alpha im Start-Keyframe auf 0,5 und im End-Keyframe auf 0. Für einen grünen Button verwenden Sie rgba(46, 139, 87, 0.5), für Blau rgba(41, 128, 185, 0.5).

Sie können Wackeln und Pulsieren auf demselben Button kombinieren, aber wir empfehlen es nicht. Zwei gleichzeitige Bewegungen konkurrieren miteinander und wirken unruhig. Wählen Sie eine aus, basierend auf dem Charakter der Seite und der Zielgruppe.

CodePen: Live-Beispiel

Wir haben einsatzbereiten Code mit beiden Animationsoptionen auf CodePen bereitgestellt. Öffnen Sie ihn, ändern Sie Dauer, Farben, Innenabstand und beobachten Sie die Ergebnisse in Echtzeit.

Das Einbetten auf einer Seite per Zusätzliches CSS (Design → Customizer → Zusätzliches CSS) dauert eine Minute. Kopieren Sie den benötigten Block, fügen Sie ihn ein, speichern Sie. Ein Button im Markup Ihres Themes oder in einem Formular-Plugin übernimmt die Stile über die Klasse.

Wenn Sie WordPress nutzen, ist der Weg noch kürzer: Gehen Sie ins Admin-Panel, öffnen Sie die Seite oder den Beitrag im Editor, suchen Sie den Button und fügen Sie in den Block-Einstellungen die Klasse animated-btn animated-btn--shake hinzu. Platzieren Sie die Stile im Zusätzlichen CSS, und sie werden im Frontend geladen, ohne Theme-Dateien bearbeiten zu müssen.

Das Video oben ist ein praxisnahes Tutorial zur Erstellung des Wackeleffekts von Grund auf. Der Autor demonstriert den Prozess in Echtzeit: vom Markup bis zu den finalen Anpassungen in den DevTools (Englisch, 4 Minuten).

⁉️🤔 Häufig gestellte Fragen

Verlangsamt die Animation das Laden der Seite?

Dreißig Zeilen CSS wiegen selbst unkomprimiert weniger als 1 KB. Keine zusätzlichen Bibliotheken, kein JavaScript. Die Ladezeit der Seite ändert sich nicht. Zum Vergleich: Ein einzelnes Font-Awesome-Icon liegt im Schnitt bei 2 bis 3 KB.

Funktioniert die Animation auf Mobilgeräten?

Ja, transform und box-shadow werden auf iOS und Android ab den Versionen von 2016 hardwarebeschleunigt. Einziger Vorbehalt: Safari vor Version 15 ruckelt gelegentlich bei box-shadow während häufiger Neuzeichnungen. Beheben Sie dies, indem Sie dem Puls-Button will-change: box-shadow hinzufügen.

Wie deaktiviere ich die Animation für Nutzer mit Gleichgewichtsstörungen?

Umschließen Sie die Animation mit @media (prefers-reduced-motion: no-preference). Wenn dann die Einstellung „Bewegung reduzieren" im Betriebssystem aktiviert ist, bleibt der Button statisch. Moderne Browser unterstützen diese Media Query seit 2019.

Kann ich die Animation nur bei Hover auslösen?

Ersetzen Sie infinite in der animation-Eigenschaft durch none und beschreiben Sie dann den Hover-Zustand separat: .animated-btn:hover { animation: shake 0.4s ease-in-out; }. Der Button wackelt einmal beim Überfahren mit der Maus und stoppt dann. Das eignet sich für Situationen, in denen eine autonome Animation mit dem Design kollidiert.

Warum wird mein Button nach dem Einfügen des Codes nicht animiert?

Drei häufige Gründe: Die Klasse wurde falsch kopiert (prüfen Sie auf animated-btn--shake mit zwei Bindestrichen); die CSS-Datei des Themes überschreibt animation (fügen Sie !important hinzu oder erhöhen Sie die Selektorenspezifität); der Button befindet sich in einem Container mit overflow: hidden, der den Puls-Schatten abschneidet.

Animieren oder nicht animieren: das abschließende Fazit

Wackeleffekt, pulsierender Effekt oder ein statischer Button: Die Wahl hängt vom Kontext ab, nicht von Trends. Eine kommerzielle Landingpage mit einem einzigen CTA-Button? Wackeln alle 4 Sekunden, ohne Frage. Ein Admin-Panel oder Dashboard mit Dutzenden Buttons auf dem Bildschirm? Halten Sie sie statisch und animieren Sie nur die Hauptaktion. Eine Unternehmenswebsite mit konservativem Publikum? Puls-Highlight, minimalistisch und seriös.

Eine Regel, die wir aus Dutzenden A/B-Tests abgeleitet haben: Ein animierter Button steigert die Conversion um einige Prozentpunkte, vorausgesetzt, die Animation ist einzigartig und konkurriert nicht mit benachbarten Elementen um Aufmerksamkeit. Zwei animierte Buttons nebeneinander bedeuten eine niedrigere Conversion, weil der Nutzer verwirrt wird und keinen von beiden klickt.

Kopieren Sie den Code aus dem obigen Abschnitt, passen Sie Farben und Dauer an Ihr Projekt an. Wenn Ihnen das Ergebnis gefällt, werfen Sie einen Blick auf unsere Auswahl an Caching-Plugins. Sie helfen Ihnen, die Seitengeschwindigkeit auch mit einem Dutzend animierter Elemente auf der Seite zu erhalten.