CTA-Buttons in E-Mails sind die zentralen Handlungs-Schaltflächen, die Empfänger dazu bringen sollen, vom Lesen zum Klicken und damit zur Conversion zu wechseln — Design, Text und technische Umsetzung entscheiden über den Erfolg jeder Kampagne.
Rubrik: Online-Marketing & Content · Unterrubrik: E-Mail-Marketing · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Call-to-Action, Action-Button, Klick-Button, Bulletproof Button
Was sind CTA-Buttons in E-Mails?
Ein CTA-Button (Call-to-Action-Button) ist die handlungsauslösende Schaltfläche in einer Mail — typischerweise rechteckig, mit Hintergrundfarbe und einem klaren Text wie „Jetzt buchen" oder „Mehr erfahren". Er übersetzt das gelesene Interesse in eine Klick-Aktion und ist damit der entscheidende Hebel zwischen Lesen und Conversion.
Erklärung
Anders als auf einer Website lässt sich ein CTA-Button in einer Mail nicht einfach mit CSS bauen — viele Mail-Clients (allen voran Outlook auf Windows) ignorieren padding, border-radius oder background-color auf <a>-Elementen. Deshalb wird in der E-Mail-Welt der Bulletproof Button verwendet: ein gestaltetes Element, das in einer Tabellenzelle (<td>) mit Hintergrundfarbe, Innenabstand und einem Link-Element gebaut ist. Diese Konstruktion läuft zuverlässig in Gmail, Apple Mail, Outlook (Web und Desktop), Yahoo und Thunderbird.
Wichtige Design-Prinzipien:
- Genug Klickfläche: Mindestens 44 × 44 Pixel (Apple HIG, WCAG 2.1) — Daumen brauchen Fläche.
- Hoher Kontrast: Button-Farbe muss sich deutlich vom Mail-Hintergrund abheben. Lazi-Beispiel: Rot (#E40037) auf weiß.
- Klare Beschriftung: Verben in Ich-Form („Mein Platz reservieren") konvertieren besser als generische Aufrufe („Hier klicken").
- Eindeutiges Ziel: Pro Mail ein primärer CTA. Mehrere konkurrierende Buttons verwässern die Conversion.
- Mobile zuerst: Über 60 Prozent der Mails werden auf dem Smartphone geöffnet — Buttons müssen auch ohne Hover-Zustand funktionieren.
- Alt-Text und Title: Für Screenreader und blockierte Bilder.
Tools wie der Bulletproof-Button-Generator von Campaign Monitor oder Buttons.cm liefern fertigen, getesteten Code.
Beispiele
- Beispiel 1: „Jetzt anmelden" als roter Button (#E40037), weiße Schrift, 280 × 56 Pixel — als Hauptaktion einer Infotag-Einladung.
- Beispiel 2: Sekundärer CTA „Mehr erfahren" als Text-Link unter dem primären Button — visuell deutlich kleiner, damit die Hierarchie klar bleibt.
- Beispiel 3: Outline-Button mit transparentem Hintergrund und Rahmen — für Dark-Mode-Kompatibilität, weil ein dunkler Button auf dunklem Hintergrund verschwinden würde.
- Beispiel 4: „In den Warenkorb" als Button in einer Produkt-Mail — direkt unter dem Produkt-Bild, kurzer Pfad zur Conversion.
- Beispiel 5: „Termin buchen" mit Personalisierung im Beschriftungstext („Dominik, sichere dir deinen Platz") — A/B-getestet gegen die neutrale Variante.
- Beispiel 6: Wiederholter CTA: Derselbe Button am Anfang und am Ende einer langen Mail — fängt schnelle Scanner und gründliche Leser gleichzeitig.
In der Praxis
In Mail-Marketing-Tools sind Bulletproof Buttons meist als fertiges Modul verfügbar — drag-and-drop, Farbe und Text einstellen, fertig. Wer von Hand baut, kombiniert eine <table> mit <td> (Padding, Hintergrundfarbe) und einem <a> darin (Display block, Padding, Farbe). Outlook-Sonderfälle löst man mit VML-Code in Conditional Comments — fertige Generatoren übernehmen das. Vor dem Versand: Test in Litmus oder Email on Acid (oder zumindest manuell: iPhone, Android, Outlook Web). DSGVO-relevant: Der Ziel-Link sollte mit UTM-Parametern getrackt sein, damit die Conversion in Analytics auftaucht. Performance-Daten: CTA-Tests gehören zu den wirkungsvollsten A/B-Tests, weil schon kleine Wortänderungen 10–30 Prozent CTR-Unterschied bringen können.
Vergleich & Abgrenzung
| Merkmal | Bulletproof Button | CSS-Button |
|---|---|---|
| Renderverhalten | Konsistent in allen Clients | Inkonsistent (Outlook bricht) |
| Code-Aufwand | Höher (Tabelle + VML) | Niedrig |
| Test-Aufwand | Niedrig (läuft überall) | Hoch (viele Fallbacks) |
CTA-Button ist nicht dasselbe wie Text-Link: Ein Button hat eine Hintergrundfarbe und Fläche, ein Text-Link nur Unterstreichung. Beide haben ihre Berechtigung — der Button für Primär-Aktionen, der Link für Sekundär-Aktionen oder Footer-Items.
Häufige Fragen (FAQ)
Wie viele CTAs sollte eine Mail enthalten? Faustregel: ein primärer CTA pro Mail. Sekundäre CTAs sind okay, wenn sie deutlich schwächer gestaltet sind (Text-Link statt Button). Mehrere gleichgewichtige Buttons verteilen die Klicks und senken die Gesamtconversion — bekannt als „Choice Overload" oder Hick's Law.
Welche Button-Farbe konvertiert am besten? Es gibt keine universell beste Farbe — entscheidend ist der Kontrast zum Mail-Hintergrund und die Konsistenz zur Brand. Tests zeigen oft, dass Farbe weniger wichtig ist als Beschriftung. Lazi nutzt Rot (#E40037) als primäre CTA-Farbe, weil das die Brand-Farbe ist und auf weißem Hintergrund maximal heraussticht.
Weiterführend
- Campaign Monitor (2024): Bulletproof Email Buttons. buttons.cm
- Litmus (2023): Designing the Perfect CTA Button. litmus.com/blog
- Really Good Emails (2024): CTA Button Examples. reallygoodemails.com
