Was ist ein CTA?
Der CTA ist der Moment, in dem aus einem Leser ein Kunde wird. Ohne ihn ist deine Website ein gut gemachter Prospekt, den jemand überfliegt und wieder weglegt. Mit einem klaren CTA gibst du dem Besucher ein Ziel: "Hier klicken, wenn du das willst."
Ein CTA ist selten nur ein Button. Dazu gehört fast immer die sogenannte Microcopy — die kleinen Texte um den Button herum, die Fragen klären, Risiko senken und Vertrauen aufbauen. Beispiel: Überschrift "Spare 30 % beim Heizen mit neuen Akustikpaneelen", darunter ein grüner Button "Jetzt Beratung anfordern", darunter in kleiner Schrift "Antwort innerhalb von 24 Stunden, unverbindlich". Die drei Microcopy-Zeilen entscheiden oft mehr über die Klickrate als der Button selbst.
Die meisten Websites haben zu viele CTAs, die nichts wollen ("Mehr erfahren") oder zu wenige, die versteckt im Footer schlummern. Beides kostet Umsatz.
Primary vs Secondary CTA — die Hierarchie
Auf einer guten Seite gibt es nicht "gleichberechtigte" Buttons. Es gibt einen Primary CTA — die eine Handlung, die du wirklich willst. Und bei Bedarf einen Secondary CTA — eine schwächere Option für alle, die noch nicht bereit sind.
| Rolle | Beispiel | Visuell |
|---|---|---|
| Primary CTA | "Termin buchen", "Angebot anfordern" | Volle Farbe, hoher Kontrast, groß |
| Secondary CTA | "Mehr zum Ablauf", "Preisliste ansehen" | Outline, dezenter, kleiner |
| Tertiary / Link | "Newsletter", "Blog" | Reiner Textlink |
Die Hierarchie muss visuell sofort lesbar sein. Zwei gleich große, gleich bunte Buttons nebeneinander verwirren den Besucher und halbieren die Klickrate auf den wichtigeren. Regel: Der primäre CTA ist immer der auffälligste. Der sekundäre darf existieren, aber nicht mitkonkurrieren.
Wie ein guter CTA funktioniert
Ein wirksamer CTA beantwortet drei Fragen in einer halben Sekunde: Was passiert, wenn ich klicke? Warum sollte ich klicken? Was bringt es mir?
Vier Hebel machen den Unterschied:
- Verb an erster Stelle — "Termin buchen" schlägt "Termin" oder "Mehr Infos". Das Verb zieht den Blick.
- Nutzen statt Aktion — "Angebot in 24h erhalten" ist stärker als "Formular ausfüllen".
- Visueller Kontrast — Der Button muss sich vom Rest der Seite abheben, durch Farbe, Größe, Whitespace drumherum.
- Entlastung von Risiko — "Unverbindlich", "kostenlos", "jederzeit kündbar" senken die Hemmschwelle um messbare Prozentpunkte.
Und dann gibt es noch die Platzierung. Der erste CTA gehört above the fold, in die Hero Section. Der zweite nach dem ersten Nutzenblock. Der dritte am Ende der Seite. Bei langen Landingpages ruhig jeder 1000 Pixel einer. Scroll-Müdigkeit ist real.
Wichtig für die Wirkung: genug Whitespace um den Button herum. Ein Button zwischen zwei dichten Textblöcken verschwindet — einer mit 60 Pixel Luft nach oben und unten zieht den Blick.
Sticky CTA — der immer sichtbare Button
Auf langen Seiten verliert der Besucher den Button aus den Augen, wenn er weit scrollt. Die Lösung: Sticky CTA — ein Button, der beim Scrollen am Bildrand "kleben bleibt". Meist als kleiner Button rechts unten oder als Leiste am oberen Seitenrand. Besonders auf Smartphones ist der Mobile Sticky CTA am unteren Bildschirmrand Standard bei Shops und Lead-Gen-Seiten. Ein Dauer-Button "Jetzt bestellen" oder "Termin anfragen", der immer mit dem Daumen erreichbar ist, hebt die Klickrate auf Mobile regelmäßig um 15 bis 30 Prozent. Wichtig ist nur: Nicht zu groß, nicht aufdringlich, und mit einem Close-Kreuz, damit niemand sich genervt fühlt.
Warum CTAs für deine Website wichtig sind
Deine Conversion Rate hängt direkt am CTA. Studien von Unbounce und HubSpot zeigen regelmäßig: Allein das Umtexten eines Buttons hebt die Klickrate um 20 bis 90 Prozent — ohne dass der Rest der Seite angefasst wird.
Beispiel: Ein Steuerberater hatte den Button "Kontaktformular öffnen". Nach dem Wechsel auf "Kostenlose Erstberatung sichern" stiegen die Anfragen von 4 auf 11 pro Monat. Gleicher Traffic — nur ein anderer Satz. Ohne klaren CTA entscheidet der Besucher nichts. Er scrollt, liest, schließt den Tab. Mit klarem CTA hat er eine Option.
Gute vs schlechte CTA-Texte
Der Unterschied zwischen "okay" und "klickt" liegt oft in drei bis vier Wörtern. Hier eine Auswahl echter Paarungen aus Projekten:
| Schlecht | Gut | Warum |
|---|---|---|
| Absenden | Angebot anfordern | Sagt, was passiert |
| Mehr erfahren | Preisliste ansehen | Verspricht konkreten Inhalt |
| Klicken Sie hier | Termin in 60 Sekunden buchen | Nutzen + Zeitaufwand |
| Kontakt | Rückruf innerhalb 2 Stunden | Versprechen + Erwartung |
| Jetzt starten | Gratis testen, ohne Kreditkarte | Risiko raus |
| Download | PDF-Checkliste herunterladen | Format + Inhalt klar |
| Senden | Meine Anfrage abschicken | Ich-Perspektive aktiviert |
Regel: Dein CTA-Text muss den Satz "Ich will…" sauber vollenden. "Ich will… Angebot anfordern." Passt. "Ich will… absenden." Passt nicht.
Häufige Fehler bei CTAs
Zu viele CTAs nebeneinander. Drei Buttons in der Hero Section ("Beratung", "Portfolio", "Newsletter") — der Besucher weiß nicht, was er tun soll. Ein Primary, maximal ein Secondary pro Abschnitt.
Generischer Button ohne Kontext. "Mehr erfahren" ohne Nutzenversprechen ist verschwendete Pixelfläche.
Versteckte Platzierung. Der CTA nur am Seitenende, ohne Wiederholung oben. 60 Prozent der Besucher sehen den Footer nie.
Schwacher visueller Kontrast. Hellgrau auf Weiß verschwindet im Wimpernschlag. Der Button muss auffallen, auch beim schnellen Überfliegen — Aufgabe des UI-Designs.
Keine Mobile-Optimierung. Auf dem Smartphone muss der CTA mit dem Daumen erreichbar sein, mindestens 48 Pixel hoch. Ein solides Responsive Design ist Voraussetzung.