CTA-Buttons (Call-to-Action-Buttons) in E-Mails sind klickbare Schaltflächen, die den Leser zu einer konkreten Handlung auffordern – etwa zum Kauf, zur Anmeldung oder zum Lesen eines Artikels.
Rubrik: Online-Marketing & Content · Unterrubrik: E-Mail-Marketing · Niveau: Einsteiger Synonyme / Auch bekannt als: Call-to-Action, Handlungsaufforderung, E-Mail-Button, Klick-Button
Was sind CTA-Buttons in E-Mails?
Jede Marketing-E-Mail hat ein Ziel: Der Empfänger soll eine bestimmte Aktion ausführen. Der CTA-Button ist das visuelle und textliche Element, das diesen nächsten Schritt markiert. Ob „Jetzt kaufen", „Kostenlos testen" oder „Mehr erfahren" – der Button ist der Konversionspunkt jeder E-Mail. Ohne einen klaren, auffälligen CTA bleibt selbst der beste Newsletter ohne messbare Wirkung.
Erklärung
Design: So sieht ein guter CTA-Button aus
Farbe und Kontrast: Der Button muss sich klar vom Hintergrund abheben. Eine kontrastierende Farbe (z. B. orangefarbener Button auf weißem Hintergrund) sorgt für visuelle Dringlichkeit. Wichtig: Die Farbe sollte zur Marke passen und barrierefrei sein (WCAG-konformer Kontrast, mehr dazu im Eintrag E-Mail Accessibility).
Größe: Die Mindestgröße für Touch-Geräte beträgt 44 × 44 Pixel (Apple-Richtlinie). Für gut klickbare Buttons sind 200 × 44 px oder breiter realistisch. Ein zu kleiner Button auf dem Smartphone führt zu Frustration und Nicht-Klick.
Rundung: Leicht abgerundete Ecken (4–8 px Border-Radius) wirken moderner und klickbarer als scharfkantige Buttons. Achtung: In Outlook wird Border-Radius nicht unterstützt – hier erscheinen Buttons immer eckig (sofern kein VML-Code eingesetzt wird).
Abstand: Buttons brauchen ausreichend Weißraum drumherum, damit sie nicht im Textfluss untergehen. Mindestens 20 px Abstand nach oben und unten empfohlen.
Positionierung: Der wichtigste CTA sollte „above the fold" platziert sein – also sichtbar, ohne dass der Leser scrollen muss. Bei langen E-Mails darf der Button mehrfach wiederholt werden.
Text: Was auf dem Button stehen sollte
Der Button-Text ist genauso wichtig wie das Design. Effektive CTA-Texte sind:
- Handlungsorientiert: Beginnen mit einem starken Verb (Kaufen, Entdecken, Herunterladen, Anmelden, Lesen)
- Spezifisch: „Jetzt kostenloses Whitepaper herunterladen" schlägt „Hier klicken"
- Nutzenorientiert: „Meinen Rabatt sichern" statt „Weiter"
- Kurz: 2–5 Wörter sind ideal; über 7 Wörter wirkt unhandlich
- Erste Person: „Mein Konto erstellen" kann besser performen als „Konto erstellen" (Ownership-Prinzip)
Texte wie „Hier klicken", „Weiter" oder „Mehr" sind zu vage – der Leser weiß nicht, was ihn erwartet.
Technische Umsetzung: Der Bulletproof Button
Das größte technische Problem ist Outlook: CSS background-color auf einem <a>-Tag funktioniert in Outlook nicht. Die Lösung ist ein Bulletproof Button, der auf HTML-Tabellen und VML basiert:
``html <!--[if mso]> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="https://example.com" style="height:44px;v-text-anchor:middle;width:200px;" arcsize="5%" fillcolor="#FF6600"> <w:anchorlock/> <center style="color:#ffffff; font-family:Arial; font-size:16px; font-weight:bold;"> Jetzt kaufen </center> </v:roundrect> <![endif]--> <!--[if !mso]><!--> <a href="https://example.com" style="background-color:#FF6600; border-radius:4px; color:#ffffff; display:inline-block; font-family:Arial; font-size:16px; font-weight:bold; line-height:44px; text-align:center; text-decoration:none; width:200px;"> Jetzt kaufen </a> <!--<![endif]--> ``
Dieser Code zeigt Outlook-Clients die VML-Version und allen anderen Clients die CSS-Version. Das MJML Framework generiert solchen Code automatisch.
Ein oder mehrere CTAs?
Weniger ist mehr: Eine E-Mail sollte einen primären CTA haben. Zu viele Handlungsoptionen führen zur Entscheidungsparalyse und senken die Klickrate. Sekundäre CTAs (z. B. Textlinks) können ergänzend eingesetzt werden, sollten aber visuell schwächer als der Hauptbutton sein.
UTM-Parameter für Tracking
Jeder CTA-Button sollte UTM-Parameter in der URL enthalten, um in Google Analytics die Klicks der E-Mail zuzuordnen: `` https://example.com/angebot?utm_source=newsletter&utm_medium=email&utm_campaign=winter-sale ``
Beispiele
- E-Commerce: Roter Button „Jetzt kaufen – 40 % sparen" unter einem Produktbild, mit genug Weißraum, zentriert positioniert
- SaaS: Blauer Button „14 Tage kostenlos testen" in einer Willkommens-E-Mail, direkt nach den wichtigsten Funktions-Highlights
- Content-Newsletter: Grüner Button „Ganzen Artikel lesen →" nach der Einleitung eines Blogartikels
- Event: Oranger Button „Meinen Platz sichern" mit Datum unter dem Event-Titel
- Re-Engagement: Einziger, großer Button „Ich möchte dabei bleiben" in einer ansonsten minimalistischen E-Mail
In der Praxis
- Mailchimp: Vorgebaute Button-Blöcke im Editor; Farbe, Text und Link per Klick anpassbar
- Klaviyo: Button-Komponente mit A/B-Test-Option direkt integriert; UTM-Parameter automatisch generierbar
- ActiveCampaign: Drag-and-Drop-Button mit anpassbarem Stil; mobile Vorschau inklusive
- Brevo: Button-Styles im Design-Editor, inkl. Hover-Effekte in unterstützten Clients
Für den manuellen Bulletproof Button: bulletproof-email.com bietet einen kostenlosen Generator.
Vergleich & Abgrenzung
| CTA-Button | Textlink | Bild-Link | |
|---|---|---|---|
| Sichtbarkeit | Hoch | Mittel | Mittel |
| Klickbarkeit mobil | Sehr gut | Schlecht | Mittel |
| Outlook-Kompatibilität | Nur mit VML | Problemlos | Problemlos |
| Trackbarkeit | Mit UTM-Params | Mit UTM-Params | Mit UTM-Params |
| Barriefreiheit | Hoch (mit ALT) | Hoch | Nur mit ALT-Text |
Häufige Fragen (FAQ)
Wie setze ich CTA-Buttons in E-Mails konkret um? Für Tool-Nutzer reicht der vorgefertigte Button-Block im Editor – Farbe, Text und Ziel-URL eintragen, fertig. Für HTML-Entwickler empfiehlt sich das MJML-Framework oder ein Bulletproof-Button-Generator. Immer UTM-Parameter ergänzen und die mobile Darstellung in der Vorschau prüfen.
Was sind typische Fehler bei CTA-Buttons? Zu kleine Buttons auf Mobilgeräten (unter 44 px Höhe) sind der häufigste Fehler. Weitere Probleme: vager Button-Text wie „Hier klicken", fehlende Outlook-Kompatibilität (Button erscheint nur als Link), zu viele gleichwertige CTAs in einer E-Mail, und fehlende UTM-Parameter für das Tracking.
Weiterführend
- Bulletproof Email: Generator für Outlook-kompatible Buttons – bulletproof-email.com
- Klaviyo Blog: „The Science of the Call to Action in Email" (Klaviyo, 2023) – klaviyo.com/blog
- Campaign Monitor: „Call to Action Best Practices" (Campaign Monitor, 2024) – campaignmonitor.com/resources
