1) Erstmal einordnen: „Button“ ist in E-Mails fast immer nur ein Link

In E-Mails gibt es keinen echten Button wie im Web. Meist ist es ein <a>-Link, der per CSS wie ein Button aussieht, oder ein „Bulletproof Button“, der für Outlook zusätzlich VML nutzt. Wenn also „der Button nicht funktioniert“, bedeutet das oft: Der Link ist kaputt, wird gefiltert, liegt über einem Element, ist nicht erreichbar oder wird vom Client nicht als klickbare Fläche erkannt.

2) Klassiker: Der Link ist technisch ungültig oder nicht vollständig

• Kein https://: Manche Clients behandeln www.beispiel.de nicht zuverlässig als Link. Nutze immer eine absolute URL: https://beispiel.de/....
• Umlaute/Leerzeichen im Link: Nicht korrekt URL-encodiert führt zu Abbrüchen. Pfade und Parameter sollten sauber encodiert sein.
• Tracking-Parameter kaputt: Ein falsch gesetztes & oder ein abgeschnittenes utm_-Feld reicht schon.
• Zeilenumbrüche im href: Bei Copy/Paste oder Template-Engines kann der href im Quelltext umbrechen. Einige Clients interpretieren dann nur den ersten Teil.
• Redirect-Ketten: Zu viele Weiterleitungen oder gemischtes http/https kann misstrauisch wirken – und wird teils blockiert.

Quick-Check: Kopiere die finale URL (wie sie im Quelltext steht) in den Browser. Wenn sie dort nicht sauber lädt, ist es kein E-Mail-Problem, sondern ein Link-Problem.

3) Outlook-Falle: CSS wird ignoriert – und die Klickfläche schrumpft

Viele Outlook-Versionen (Windows) nutzen Word als Rendering-Engine. Das bedeutet: moderne CSS-Eigenschaften werden nur teilweise oder gar nicht unterstützt. Das typische Symptom: Der Button sieht zwar wie ein Button aus, aber klickbar ist nur ein kleines Stück Text in der Mitte.

Ursachen:

• Padding am <a> wird ignoriert → Klickfläche entspricht nur dem Text.
• Display-Properties (z. B. inline-block) werden uneinheitlich umgesetzt.
• Border-Radius wird teilweise ignoriert (optisch), ist aber selten die Ursache fürs Nicht-Klicken.

Lösung in der Praxis: Nutze ein „Bulletproof Button“-Pattern, das für Outlook zusätzlich VML rendert (runde Rechtecke via VML). Dann ist die Fläche stabil klickbar, nicht nur der Text.

4) Überlagerung/Layering: Ein Element liegt unsichtbar über dem Button

Ein besonders fieser Bug: Der Button ist korrekt, aber ein anderes Element liegt darüber – z. B. ein transparentes <div>, ein Bild, eine Tabellenzelle oder ein falsch gesetzter Spacer. Im Browser würdest du das schnell via DevTools sehen. In E-Mails passiert das oft durch:

• Negativ-Margins oder ungewöhnliche Positionierung
• Absolute Positionierung (in E-Mails grundsätzlich riskant)
• Z-Index/Stacking (wird je nach Client anders interpretiert)
• „Klickbares Bild“ über dem Button in derselben Zelle

Best Practice: In E-Mails Layout konsequent mit Tabellen strukturieren und überlappende Layout-Tricks vermeiden. Was im Web „nice“ ist, ist im Postfach oft „fragil“.

5) Bild-Buttons: Wenn Bilder blockiert werden, ist der Button weg

Wenn dein Button nur als Bild existiert (z. B. PNG mit Text), kann Folgendes passieren: Bilder sind standardmäßig deaktiviert, der Empfänger sieht nur einen leeren Platzhalter – und hat keinen CTA.

Wenn du Bild-Buttons verwendest:

• Immer Alt-Text setzen, der handlungsorientiert ist.
• Das Bild mit einem sauberen <a href> umschließen.
• Optional einen Text-Link als Fallback direkt darunter anbieten.

Noch besser: Gestalte Buttons als HTML (Link + Hintergrundfarbe). Dann bleibt die Handlungsaufforderung auch ohne Bilder sichtbar.

6) Dark Mode: Der Button ist da, aber „unsichtbar“ 😵‍💫

Viele Nutzer lesen Mails im Dark Mode. Manche Clients invertieren Farben automatisch oder überschreiben Hintergrund-/Textfarben. Ergebnis: Dein Button ist vorhanden, aber Text und Hintergrund haben zu wenig Kontrast – Nutzer denken, er sei deaktiviert.

Häufige Dark-Mode-Probleme:

• Heller Text wird automatisch dunkel → auf dunklem Hintergrund nicht mehr lesbar
• Button-Hintergrund wird „angepasst“ → wirkt wie normaler Hintergrund
• Border verschwindet → Button verliert Kontur

Fixes:

• Kontrastreserven: nicht „Grau auf Grau“, sondern klarer Kontrast.
• Outline/Border nutzen, damit der Button auch bei Farbverschiebung erkennbar bleibt.
• Genug Padding + eindeutige Form (z. B. 6–10px Radius), damit er als Button erkennbar ist.

7) Link wird von Security-Filtern umgeschrieben oder geblockt

Unternehmen nutzen häufig Security-Gateways, die Links umschreiben (Safe Links, Proofpoint u. a.). Das ist normal – kann aber zu Problemen führen, wenn:

• die Zielseite eine aggressive Bot-/Fraud-Erkennung hat und die Gateway-Requests blockiert,
• die URL extrem lang ist und der Client sie abschneidet,
• mehrere Redirects kombiniert werden (Tracking → Shortener → Landing → App-Store).

Stabiler Ansatz: Verwende möglichst eine saubere, kurze HTTPS-URL zu einer Landingpage, die dann intern (serverseitig) weiterleitet oder den nächsten Schritt anbietet. Das reduziert Link-Brüche dramatisch.

8) „javascript:“ & Form-Buttons: In E-Mails praktisch tabu

Manche Marketer versuchen Buttons mit JavaScript, Formularen oder OnClick-Events zu bauen. Das funktioniert in E-Mail-Clients fast nie – und wird häufig entfernt. Beispiele, die du vermeiden solltest:

• javascript: im href
• <button> mit JS-Handler
• <form> und Submit in der E-Mail
• Inline-Skripte oder externe JS-Dateien

In E-Mails gilt: Link statt Logik. Alles, was Interaktion erfordert, gehört auf die Landingpage.

9) Mobile-Spezifika: iOS/Android erkennen manchmal „Smart Links“ statt deines Links

Auf mobilen Geräten werden Telefonnummern, Adressen oder Datumsangaben automatisch verlinkt. Das kann Layouts verschieben oder dazu führen, dass Nutzer versehentlich den „Smart Link“ klicken statt deinen CTA. Besonders heikel:

• CTA-Text enthält eine Nummer oder eine Adresse
• Buttons liegen nah an automatisch erkannten Elementen
• Zu kleine Klickfläche (unter ~44px Höhe) führt zu Fehltaps

Praxis-Tipp: Buttons groß genug bauen, klaren Abstand zu anderen Links, und nicht mehrere Links dicht nebeneinander stapeln. Weniger ist hier wirklich mehr.

10) Der „Bulletproof Button“: Das zuverlässigste Pattern

Wenn du dauerhaft Ruhe willst, nutze ein robustes Button-Muster: Tabellenlayout, Link als Text, Hintergrundfarbe, und für Outlook optional VML. Selbst wenn du keinen VML-Teil einbaust, ist ein table-basierter Button meist deutlich stabiler als moderne CSS-Spielereien.

Wichtig: Achte darauf, dass der Link immer als Text existiert und nicht nur optisch „Button spielt“. Dann bleibt er auch bei CSS-Reduktion klickbar.

11) Debug-Checkliste: So findest du die Ursache in 5 Minuten ✅

1. Link validieren: ist https:// drin, keine Leerzeichen, keine Zeilenumbrüche?
2. Tracking testen: einmal mit Tracking-URL, einmal mit direkter Ziel-URL vergleichen.
3. Client eingrenzen: passiert es nur in Outlook (Windows) oder nur mobil?
4. Button-Typ prüfen: HTML-Link oder Bild? Wenn Bild, gibt es Text-Fallback?
5. Klickfläche: ist nur der Text klickbar? Dann Outlook/CSS-Padding-Problem.
6. Überlagerung: liegt ein Spacer oder Bild darüber? Layout vereinfachen, Tabellen prüfen.
7. Dark Mode: ist der Button sichtbar und klar abgesetzt?
8. Security-Gateways: Link wird umgeschrieben? Teste Versand an eine Firmenadresse.

Wenn du diese Punkte systematisch durchgehst, findest du in der Regel schnell, ob es ein Link-, Layout- oder Client-Problem ist.

12) Best Practices für stabile CTA-Buttons (deutschsprachige Newsletter-Praxis)

• Ein primärer CTA pro Abschnitt – klare Entscheidung statt Link-Friedhof.
• Absolute HTTPS-URL ohne unnötig lange Parameterketten.
• Text-Link als Backup direkt unter dem Button („Falls der Button nicht funktioniert…“).
• Große Klickfläche (komfortabel auf dem Smartphone).
• Keine Layout-Tricks wie absolute Positionierung oder komplexe Overlays.
• Saubere Typografie und starker Kontrast, besonders für Dark Mode.

Und ganz ehrlich: E-Mail ist ein robustes, aber konservatives Medium. Wer sich daran anpasst, gewinnt Zustellbarkeit, Klickrate und weniger Support-Tickets. Wer E-Mails wie Webseiten baut, gewinnt vor allem Überraschungen.

Fazit

Wenn Buttons in E-Mails nicht funktionieren, liegt es selten an „einem“ Fehler – sondern an der Summe aus Client-Limits, HTML/CSS-Support, Tracking, Dark Mode und Security-Filtern. Die gute Nachricht: Mit einem soliden, einfachen Button-Pattern und einer sauberen Link-Strategie bekommst du das sehr zuverlässig in den Griff.

Wenn du regelmäßig Newsletter baust, lohnt es sich, ein stabiles CTA-Template zu standardisieren. Dann musst du später nicht jedes Mal neu rätseln, warum es bei Outlook wieder anders aussieht. 🙂