Ein guter Call to Action ist eine kurze Button-Beschriftung, die mit einem Verb beginnt und nennt, was Besucher bekommen, plus eine Zeile Microcopy, die ihre größte Sorge ausräumt. Hier sind 60 eigene Beispiele, geordnet nach Seitentyp (Hero, Preisseite, Formular, E-Mail und mehr), jeweils mit Button-Design und einer Erklärung, warum es funktioniert.
Ein Call to Action (CTA) ist das Element, das Besucher zum nächsten Schritt auffordert: ein Button, ein Link oder manchmal ein Formular. Die meisten CTAs, die funktionieren, haben drei Merkmale gemeinsam:
Jedes Beispiel unten wurde für diese Seite geschrieben; keines ist von einem echten Unternehmen kopiert. Setze dein eigenes Angebot ein und behalte eine Aussage (eine Frist, eine Antwortzeit, einen kostenlosen Plan) nur, wenn sie für dich stimmt.
Suche nach einem Wort ("kostenlos", "Testphase", "buchen") oder nach Seitentyp ("Preisseite", "E-Mail").
Springe zu: Hero-Bereich · Preisseite · Formular · E-Mail · Produktseite · Blog und Newsletter · App-Onboarding
Der erste Button, den Besucher sehen. Er sollte den ersten Schritt nennen, nicht die ganze Reise.
Keine Karte nötig. Mit zwei Klicks kündbar.
Warum es funktioniert: Verbindet die Aktion mit den zwei Sorgen, die Menschen vor einer Testphase haben: Bezahlung und Ausstieg.
Ein Techniker aus deiner Nähe ruft innerhalb eines Werktags zurück.
Warum es funktioniert: Sagt, was "kostenlos" dir bringt und wann etwas passiert.
Verbinde eine Tabelle und erhalte in wenigen Minuten ein Dashboard.
Warum es funktioniert: Verspricht ein persönliches Ergebnis statt einer allgemeinen Demo.
Drei Fragen. Preis direkt auf dem Bildschirm, kein Verkaufsgespräch.
Warum es funktioniert: Ich-Form ("mein") plus ein klar umrissener Aufwand.
Beantworte fünf Fragen und erhalte einen Essensplan zum Ausdrucken.
Warum es funktioniert: Nennt ein konkretes Ergebnis, das sich Besucher vorstellen können.
Suche nach Postleitzahl, Tag oder Niveau.
Warum es funktioniert: Trifft die eigentliche Frage der Besucher (wo und wann) statt "Mehr erfahren".
Öffnet sich in deinem Browser. Keine Installation nötig.
Warum es funktioniert: Ein Verb mit wenig Verpflichtung, und die Hürde der Installation fällt weg.
Live-Kalender für die nächsten 60 Tage.
Warum es funktioniert: Bei Buchungen ist die Verfügbarkeit die erste Frage, also fang damit an.
Wähle deine Geräte und wie viel Zeit du hast.
Warum es funktioniert: Besucher bauen selbst etwas; die Microcopy zeigt, dass es sich an sie anpasst.
Ein PDF mit 12 Seiten. Wir schicken es dir einmal per E-Mail.
Warum es funktioniert: Legt genau fest, was ankommt und wie oft.
Der kostenlose Plan bleibt kostenlos. Upgrade nur, wenn du mehr brauchst.
Warum es funktioniert: Beantwortet die unausgesprochene Frage "Wie lange kostenlos?".
Fünfzehn Minuten, wann es dir passt.
Warum es funktioniert: Stellt das Gespräch als fachliche Hilfe dar und begrenzt die Zeit.
Besucher vergleichen hier. Jeder Plan-Button sollte sagen, was bei diesem Plan als Nächstes passiert.
Monatliche Abrechnung. Plan jederzeit wechseln.
Warum es funktioniert: Nutzt den Plannamen, damit sich der Klick wie eine bewusste Entscheidung anfühlt.
An Tag 14 wählst du einen Plan, oder es passiert nichts.
Warum es funktioniert: Erklärt das Ende der Testphase, den Moment, den Menschen fürchten.
Enthält alles aus Starter, plus Plätze für dein Team.
Warum es funktioniert: Kurzes Verb plus Plan, mit dem Unterschied darunter ausgeschrieben.
Für 50+ Plätze, individuelle Verträge oder Rechnungsstellung.
Warum es funktioniert: Sagt, für wen dieser Button gedacht ist, damit die Falschen ihn überspringen.
Zahle für zehn Monate, nutze zwölf.
Warum es funktioniert: Macht aus einem Rabatt eine einfache, nachprüfbare Rechnung.
Deine bisherige Arbeit und deine Einstellungen werden übernommen.
Warum es funktioniert: Bestehende Nutzer fürchten, Arbeit zu verlieren; die Microcopy nimmt ihnen diese Sorge.
Du kannst in einen höheren Plan wechseln, ohne etwas zu verlieren.
Warum es funktioniert: "Starten mit" stellt den günstigen Plan als ersten Schritt dar, nicht als endgültige Wahl.
Eine Zahlung. Updates für diese Version inklusive.
Warum es funktioniert: Bei Einmalpreisen steht das Modell klar neben dem Button.
Vollständige Tabelle, Plan für Plan.
Warum es funktioniert: Eine sekundäre Aktion für Besucher, die sich noch nicht entscheiden wollen.
Die meisten Teams mit 5 bis 20 Personen starten hier.
Warum es funktioniert: Orientierung nach Passung, nicht nach erfundener Beliebtheit.
Der Absende-Button ist das Letzte, was vor der Entscheidung gelesen wird. Sag, was Besucher bekommen, nicht, was das Formular tut.
Du erhältst es innerhalb einer Stunde per E-Mail.
Warum es funktioniert: Ersetzt "Absenden" durch das Ergebnis und eine Zeitangabe.
Als Nächstes: Benutzernamen wählen.
Warum es funktioniert: Zeigt, dass noch ein Schritt folgt, damit es sich nicht wie eine Falle anfühlt.
Werktags von 8am bis 6pm. Außerhalb dieser Zeiten rufen wir nicht an.
Warum es funktioniert: Respektiert die Zeit der Besucher und nennt die Grenzen.
Wir schicken dir den Teilnahmelink und eine Kalendereinladung per E-Mail.
Warum es funktioniert: Besitz ("mein Platz") plus das, was als Nächstes ankommt.
Deine Punktzahl erscheint auf dem nächsten Bildschirm.
Warum es funktioniert: Bei Quiz ist das Ergebnis die Belohnung, also nenne es.
Ein echter Mensch antwortet, meist noch am selben Tag.
Warum es funktioniert: Weckt eine menschliche Erwartung, ohne eine genaue Zeit zu versprechen.
Eine E-Mail zum Start. Vorher nichts.
Warum es funktioniert: Ein kleines Versprechen zur E-Mail-Menge senkt die Hürde für die Anmeldung.
Dauert etwa 10 Minuten. Du kannst speichern und später weitermachen.
Warum es funktioniert: Ehrliche Dauer plus ein Sicherheitsnetz für lange Formulare.
Funktioniert in Google Sheets und Excel.
Warum es funktioniert: Beantwortet "Funktioniert das bei mir?" genau im Moment des Klicks.
Bis 24 Stunden vorher kostenlos stornierbar.
Warum es funktioniert: Stellt die Stornoregel dorthin, wo die Entscheidung fällt.
In einer E-Mail konkurriert der Button mit jeder anderen Nachricht im Posteingang. Sei wörtlich: Leser sollten genau wissen, wohin der Link führt.
Noch zwei Schritte. Etwa drei Minuten.
Warum es funktioniert: Fortschritt als Rahmen für eine Onboarding-Erinnerung.
Lieferung verfolgen und Adresse ändern.
Warum es funktioniert: Zählt auf, was Leser nach dem Klick tun können.
Code wird an der Kasse angewendet. Endet Sonntag um Mitternacht.
Warum es funktioniert: Eine echte Frist mit Datum (nur wenn sie echt ist).
Sam hat eine Frage zu deinem Inserat gestellt.
Warum es funktioniert: Nennt die Person, wodurch sich die Nachricht konkret anfühlt.
Etwa sechs Minuten Lesezeit.
Warum es funktioniert: Bei Newslettern hilft die Zeitangabe bei der Wahl zwischen jetzt und später.
Dein Plan endet an dem oben genannten Datum.
Warum es funktioniert: Verknüpft die Aktion mit einer Tatsache, die schon in der E-Mail steht.
Ein Tippen. Dauert zehn Sekunden.
Warum es funktioniert: Bitten um Feedback wirken besser, wenn der Aufwand erkennbar winzig ist.
Dein Warenkorb bleibt sieben Tage gespeichert.
Warum es funktioniert: Versichert, dass nichts verloren gegangen ist.
Dieser Link läuft in 24 Stunden ab.
Warum es funktioniert: Transaktional: klares Verb, klare Folge.
Dein Termin wurde verschoben. Wähle einen beliebigen freien Slot.
Warum es funktioniert: Gibt nach einer ungewollten Änderung die Kontrolle zurück.
Besucher stehen kurz vor dem Kauf und suchen nach Gründen zu warten. Räume diese Gründe direkt neben dem Button aus.
Kostenlose Rückgabe innerhalb von 30 Tagen.
Warum es funktioniert: Die Standardbeschriftung, nach der Menschen suchen, mit dem größten Risiko ausgeräumt.
Versand morgen bei Bestellung vor 2pm.
Warum es funktioniert: Ein echter Versandschluss gibt einen Grund, heute zu handeln.
Nutze die Größentabelle oder gib deine übliche Größe bei anderen Marken ein.
Warum es funktioniert: Löst das häufigste Zögern beim Kleidungskauf.
Eine E-Mail, sobald es wieder auf Lager ist.
Warum es funktioniert: Hält Besucher bei ausverkauften Artikeln, statt sie zu verlieren.
Sieh dir die Gravur an, bevor du bezahlst.
Warum es funktioniert: Zeigt, dass Besucher das Ergebnis selbst in der Hand behalten.
In deinem Konto gespeichert, auf jedem Gerät sichtbar.
Warum es funktioniert: Eine sanftere Aktion für alle, die noch nicht kaufen wollen.
Leser kamen wegen der Inhalte, nicht wegen eines Verkaufsgesprächs. Biete mehr von dem, was sie schon gewählt haben.
Eine E-Mail jeden Donnerstag. Abmeldung mit einem Klick.
Warum es funktioniert: Häufigkeit und Ausstieg werden vorab genannt.
Die Schritte aus diesem Artikel auf einer druckbaren Seite.
Warum es funktioniert: Ein Content-Upgrade, das direkt an das Gelesene anknüpft.
Praktische Tipps für kleine Shops, zweimal im Monat.
Warum es funktioniert: Ein Wort reicht, wenn die Microcopy Zielgruppe und Rhythmus nennt.
Erstelle eine Kopie in deinem eigenen Konto. Kostenlos.
Warum es funktioniert: Macht aus Lesen sofort Handeln.
Teil 2: Preise festlegen.
Warum es funktioniert: Nennt das nächste Thema, damit der Klick einen klaren Nutzen hat.
Wir beantworten Leserfragen in der nächsten Ausgabe.
Warum es funktioniert: Lädt zur Beteiligung ein und sagt, was damit passiert.
Neue Nutzer entscheiden in den ersten Minuten, ob es sich lohnt, das Produkt zu lernen. Jeder Button sollte sie zu ihrem ersten nützlichen Ergebnis führen.
Du kannst es später umbenennen oder löschen.
Warum es funktioniert: Nimmt die Angst vor einem dauerhaften Fehler.
Aus einer CSV-Datei oder deinem E-Mail-Konto.
Warum es funktioniert: Bringt früh echte Daten hinein, wodurch die App schneller nützlich wird.
Die Person sieht dieselbe Ansicht wie du.
Warum es funktioniert: Erklärt vor dem Senden, was die eingeladene Person sehen wird.
Du kannst das später in den Einstellungen erledigen.
Warum es funktioniert: Ein sichtbarer Ausweg senkt die Abbruchrate bei optionalen Schritten.
Du wählst die Uhrzeit. Standardmäßig aus.
Warum es funktioniert: Bittet um Erlaubnis und lässt die Kontrolle bei den Nutzern.
Fünf kurze Schritte. Jederzeit schließen.
Warum es funktioniert: Nennt die Länge, damit sich der Rundgang optional und klein anfühlt.
| Formel | Muster | Beispiel |
|---|---|---|
| Verb + Ergebnis | [Erhalten / Ansehen / Starten] + [was sie wollen] | Mein Angebot erhalten |
| Verb + "mein" + Objekt | Die Ich-Form lässt es wie Eigentum wirken | Meine erste Woche planen |
| Verb + Objekt + Zeit | Ergänzt, wie lange es dauert | Preis in 2 Minuten erhalten |
| Verb + Objekt + Risikoabbau | Der Risikoabbau steht meist in der Microcopy | Kostenlos testen / Keine Karte nötig |
| Nächster Schritt, benannt | Für mehrstufige Abläufe | Weiter zur Lieferung |
| Frage beantwortet | Spiegle, wonach sie gesucht haben | Verfügbarkeit prüfen |
Brauchst du Ideen für Überschriften über dem Button? Probier den Headline-Generator.
Wähle ein Verb, ein Objekt und eine Zeile Microcopy, um den Button zu sehen und sein HTML zu kopieren.
Reines CSS für einen primären und einen sekundären Button mit Fokus-, Hover-, Gedrückt- und Deaktiviert-Zustand. Oder gestalte deinen eigenen mit dem CSS-Button-Generator und stöbere in fertigen Button-Komponenten.
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
font: 600 1rem/1.2 system-ui, sans-serif;
text-decoration: none;
cursor: pointer;
transition: background-color 150ms, transform 100ms;
}
.btn-primary {
background: #1d4ed8;
color: #ffffff;
border: 0;
}
.btn-primary:hover { background: #1e40af; }
.btn-primary:active { transform: translateY(1px); }
.btn:focus-visible {
outline: 3px solid #93c5fd;
outline-offset: 2px;
}
.btn-secondary {
background: transparent;
color: #111827;
border: 2px solid #111827;
}
.btn-secondary:hover { background: #111827; color: #ffffff; }
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}Derselbe primäre Button mit Tailwind-Klassen:
<a href="/signup" class="inline-flex min-h-[44px] items-center rounded-lg bg-blue-700 px-6 py-3 font-semibold text-white hover:bg-blue-800 active:translate-y-px focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-blue-300">
Kostenlos testen
</a>Für einen vollständigen Abschlussbereich rund um den Button sieh dir die CTA-Bereich-Komponenten an.
Das sind Dinge, die einen Test wert sind, keine Vorhersagen, was gewinnt. Die Ergebnisse hängen von deiner Zielgruppe und deinem Angebot ab, also teste jeweils eine Änderung und warte auf genügend Besucher, bevor du entscheidest (der A/B-Test-Rechner sagt dir, ob ein Unterschied wahrscheinlich echt ist).
Wie CTAs in den Rest der Seite passen, erfährst du unter Was ist eine Landingpage.
Ein Call to Action ist der Button, Link oder das Formular, das Besucher zum nächsten Schritt auffordert, etwa eine Testphase zu starten, ein Gespräch zu buchen oder zu kaufen. Ein klarer CTA nennt das Ergebnis und beginnt mit einem Verb.
Meist zwei bis fünf. Zusätzliche Details wie Preis, Zeit oder was als Nächstes passiert gehören in eine kurze Zeile Microcopy neben oder unter dem Button, nicht in die Beschriftung.
Microcopy ist die kurze Zeile neben einem Call to Action, die eine Sorge ausräumt, zum Beispiel "Keine Karte nötig" oder "Bis 24 Stunden vorher kostenlos stornierbar". Sie sollte nur Dinge aussagen, die für dein Angebot stimmen.
Es gibt nicht die eine beste Farbe. Entscheidend ist, dass sich der Button von seinem Hintergrund und dem Rest der Seite abhebt und seine Beschriftung mindestens ein Kontrastverhältnis von 4.5:1 zur Buttonfarbe hat.
Eine Seite kann dieselbe primäre Aktion mehrmals wiederholen, zum Beispiel im Hero und am Ende. Vermeide zwei verschiedene primäre Aktionen mit gleichem Gewicht in derselben Ansicht; mach die zweite zu einem Button mit Umrandung oder einem Textlink.
Verb
Objekt
Microcopy
Farbe
Kopiert
HTML kopieren
Kostenlos starten · Keine Kreditkarte nötig