Ein Button ist selten „nur ein Button“. Er ist ein Versprechen: „Hier geht es weiter.“ Wenn dieses Versprechen unklar ist, zu leise wirkt oder am falschen Ort steht, werden Klicks verschenkt – selbst bei gutem Angebot. Damit Call-to-Action-Buttons (kurz: CTA) zuverlässig funktionieren, müssen drei Dinge zusammenpassen: visuelle Priorität, verständliche Sprache und ein Platz im Layout, an dem Menschen ihn erwarten.
Dieser Artikel erklärt, wie Call-to-Action-Buttons im Webdesign geplant werden, ohne sich auf Bauchgefühl zu verlassen. Die Beispiele sind bewusst alltagsnah: Landingpage, Formular, Checkout und Dashboard.
CTA-Button oder Link? Die Rolle im Interface klären
Bevor an Farben oder Formen gedacht wird, hilft eine einfache Frage: Soll die Aktion eine Entscheidung auslösen oder nur zu einer Information führen? Daraus ergibt sich, ob ein Button sinnvoll ist.
Wann ein Button die richtige Wahl ist
- Wenn eine Hauptaktion ausgelöst wird (z. B. „Angebot anfordern“, „Jetzt kaufen“, „Termin buchen“).
- Wenn ein Zustand geändert wird (z. B. „Speichern“, „Veröffentlichen“, „Senden“).
- Wenn ein klarer nächster Schritt im Flow folgt (z. B. „Weiter“, „Zur Kasse“).
Wann ein Link besser passt
- Für sekundäre Pfade wie „Details“, „Mehr erfahren“, „AGB lesen“.
- Für Navigation (Menüs, Breadcrumbs, Footer-Links).
- Für optionale Inhalte neben einer Hauptentscheidung.
Praktische Faustregel: Pro Bereich (Hero, Produktkarte, Formularabschnitt) sollte klar erkennbar sein, welche Handlung die wichtigste ist. Alles andere ordnet sich unter.
Button-Größe planen: gut klickbar, ohne plump zu wirken
Größe ist weniger „Ästhetik“ als Bedienbarkeit. Ein CTA muss schnell erfassbar und leicht zu treffen sein – besonders auf Touch-Geräten. Statt feste Pixelwerte auswendig zu lernen, ist das Zusammenspiel aus Padding (Innenabstand), Schriftgröße und Zeilenhöhe entscheidend.
Die drei Bausteine für eine stimmige Größe
- Touch-Ziel: Der klickbare Bereich sollte groß genug sein, auch wenn der Text kurz ist (z. B. „OK“). Das heißt: nicht nur Text anklickbar machen, sondern den gesamten Button.
- Innenabstände: Horizontal eher großzügig (für „Atmung“), vertikal so, dass der Button kompakt bleibt, aber nicht gedrängt wirkt.
- Konstanz im System: In einem Produkt sollten 2–3 Button-Größen reichen (z. B. Small für Tabellen, Default für normale Seiten, Large für Hero).
Typischer Fehler: Text skaliert, Button nicht
Wenn im responsiven Layout die Schrift kleiner wird, aber die Padding-Werte gleich bleiben (oder umgekehrt), kippt die Proportion. Besser ist, Größen über ein kleines Set an Komponenten-Varianten zu steuern, statt pro Seite „nachzujustieren“.
CTA-Text: verständlich, konkret, ohne Marketing-Sprech
Der Buttontext ist Microcopy (kurzer UI-Text). Er sollte zwei Dinge leisten: Handlung benennen und Erwartung klären. „Absenden“ ist zwar korrekt, sagt aber nicht, was passiert. „Kontaktanfrage senden“ ist oft hilfreicher.
Gute CTA-Texte entstehen aus dem Verb
- Schlecht: „Weiter“ (wohin?), „Start“ (was genau?), „OK“ (wozu?).
- Besser: „Zum Warenkorb“, „Kostenlos testen“, „PDF herunterladen“.
- Sehr gut: „Termin auswählen“, „Konto erstellen“, „Rechnung speichern“.
Erwartungen vermeiden Frust
Menschen klicken lieber, wenn die Konsequenz klar ist. Beispiele:
- Wenn ein Konto erstellt wird: „Konto erstellen“ statt „Registrieren“.
- Wenn ein Schritt folgt: „Weiter zur Adresse“ statt „Weiter“.
- Wenn etwas Kosten auslöst: „Kostenpflichtig bestellen“ (Transparenz schlägt Conversion-Tricks).
Wenn Unsicherheit bleibt, hilft eine kleine Zeile in der Nähe des Buttons, nicht im Button selbst: „Dauer: 2 Minuten“ oder „Keine Kreditkarte nötig“. Dazu passt auch der Fokus auf klare Sprache in UX Writing für Buttons und Formulare.
Platzierung im Layout: dort, wo der nächste Schritt erwartet wird
CTA-Platzierung ist stark vom Kontext abhängig. Trotzdem gibt es Muster, die Nutzer:innen gelernt haben. Ein CTA wirkt „richtig“, wenn er im Lesefluss liegt und räumlich zu den Informationen passt, die die Entscheidung begründen.
Landingpage/Hero: CTA nahe am Nutzenversprechen
Im Hero-Bereich sollte der CTA direkt an das zentrale Versprechen anschließen. Steht zwischen Headline und CTA noch eine große Illustration ohne Bezug, entsteht Reibung. Für Seiten mit starkem Bildanteil hilft eine klare Bildstrategie, wie sie in Webbilder gezielt planen beschrieben wird.
Formulare: Button nach dem letzten Feld, sekundäre Option daneben
Bei Formularen gilt: Der CTA gehört ans Ende des relevanten Abschnitts. Sekundäre Aktionen (z. B. „Abbrechen“, „Zurück“) sollten zwar sichtbar sein, aber klar untergeordnet. Sonst klicken Menschen aus Versehen auf den falschen Weg.
Checkout: nur eine Hauptentscheidung pro Schritt
Im Checkout sollte pro Schritt genau eine Hauptaktion dominieren (z. B. „Weiter zur Zahlung“). Alles Weitere (Gutscheincode, Versanddetails, FAQ) darf vorhanden sein, aber nicht die Hierarchie kapern. Hier helfen klare Layout-Strukturen, wie sie in Layout-Raster für klare Interfaces erklärt werden.
Visuelle Hierarchie: Primär, Sekundär, Tertiär sauber trennen
Ein CTA funktioniert, wenn er als wichtigste Handlung erkennbar ist, ohne zu schreien. Dazu braucht es ein System aus Button-Stilen. Die üblichen Rollen:
- Primär-Button: wichtigste Aktion. Pro Bereich idealerweise nur einmal.
- Sekundär-Button: alternative Aktion (z. B. „Speichern“ vs. „Speichern und schließen“).
- Tertiär/Link: optionaler Pfad (z. B. „Später erinnern“).
Kontrast ist Pflicht, aber nicht nur Farbe
Kontrast bedeutet nicht automatisch „knallige Farbe“. Auch ein dunkler Text auf hellem Hintergrund kann ausreichend sein, wenn die Umgebung ruhiger ist. Entscheidend ist, dass der Button sich klar vom Umfeld absetzt: durch Flächenwirkung, Rahmen, Abstand und konsistente Zustände (Hover, Fokus, deaktiviert).
Wenn Unsicherheit besteht, ob ein Button „stark genug“ ist, lohnt sich der Abgleich über das Umfeld: Ist in der gleichen Ansicht noch etwas ähnlich auffällig (z. B. eine farbige Badge, ein Alert, ein Bild mit hoher Sättigung)? Dann verliert der CTA Priorität. Passend dazu: Farbkontraste im UI optimieren.
Zustände & Feedback: Was passiert nach dem Klick?
Ein CTA ist Teil eines Ablaufs, nicht nur ein statisches Element. Nutzer:innen brauchen Rückmeldung, sonst klicken sie doppelt oder denken, es sei „kaputt“.
Diese Zustände gehören in jedes UI
- Normal: Standarddarstellung.
- Hover: zeigt Interaktivität (am Desktop).
- Fokus: sichtbar für Tastatur-Nutzung (Barrierefreiheit).
- Aktiv/Pressed: kurzer Zustand beim Klick.
- Loading-State: Aktion läuft (z. B. Spinner oder Text „Wird gesendet…“), idealerweise mit fixierter Button-Breite.
- Disabled: nur nutzen, wenn es wirklich sinnvoll ist (sonst wirkt es wie ein Fehler).
Loading ohne Layoutsprünge
Wenn der Buttontext sich beim Loading stark verändert (z. B. „Jetzt kaufen“ → „Zahlung wird verarbeitet“), kann die Breite springen und das Layout „wackeln“. Besser: gleiche Breite halten (z. B. durch feste Komponente oder Platzhaltertext im Design), damit die Seite ruhig bleibt.
So geht’s: CTA-Buttons in Figma & Designsystem sauber anlegen
- Button als Komponente anlegen und Varianten definieren: Primär/Sekundär/Tertiär, Größen (S/M/L), Zustände (Normal/Hover/Fokus/Disabled/Loading).
- Text-Regeln festhalten: Verb zuerst, maximal eine klare Aussage, keine Sonderzeichen als „Deko“.
- Icons nur einsetzen, wenn sie die Aktion wirklich erklären (z. B. Download-Pfeil). Sonst lieber weglassen.
- Abstände als Token/Styles konsistent halten, damit Buttons in Karten, Formularen und Modals gleich wirken.
- In Prototypen prüfen: Liegt der CTA im Flow? Ist die sekundäre Aktion sichtbar, aber untergeordnet?
Wer Komponenten langfristig pflegen will, profitiert von einem strukturierten Ansatz wie in UI-Bibliotheken strukturiert aufbauen.
Mini-Fallbeispiel: Mehr Klarheit ohne Redesign
Ausgangslage: Eine Angebotsseite hat zwei gleich aussehende Buttons („Kontakt“ und „Preis berechnen“) direkt nebeneinander. Viele Nutzer:innen klicken „Kontakt“, obwohl „Preis berechnen“ der gewünschte Self-Service-Pfad ist.
Optimierung in drei Schritten:
- „Preis berechnen“ wird zum Primär-Button, „Kontakt“ wird sekundär (Outline oder weniger dominante Fläche).
- Buttontext wird konkretisiert: „Preis in 60 Sekunden berechnen“ (Erwartung wird klarer).
- Der CTA wandert direkt unter die drei wichtigsten Leistungs-Argumente, nicht in eine generische Button-Leiste.
Ergebnis im UI: Die Hierarchie ist eindeutig, ohne zusätzliche Elemente. Der CTA passt zur Entscheidung, statt nur „auffällig“ zu sein.
Checkliste: CTA-Buttons schnell bewerten
- Ist klar, was nach dem Klick passiert (Erwartung, Konsequenz)?
- Gibt es pro Abschnitt genau eine dominante Hauptaktion?
- Ist der Button gut klickbar (auch auf Touch), ohne dass das Layout überladen wirkt?
- Steht der CTA nah an den Informationen, die die Entscheidung begründen?
- Gibt es eindeutige Zustände inkl. Fokus und Loading?
- Ist der sekundäre Pfad sichtbar, aber deutlich untergeordnet?
FAQ zu Call-to-Action-Buttons im Webdesign
Wie viele CTAs sollte eine Seite haben?
Mehrere CTAs sind möglich, aber pro sichtbarem Bereich sollte eine Hauptaktion dominieren. Wiederholte CTAs (z. B. oben und unten auf der Landingpage) sind sinnvoll, wenn sie dieselbe Aktion auslösen und im Lesefluss liegen.
Sollte der CTA immer „Jetzt“ enthalten?
„Jetzt“ kann Dringlichkeit signalisieren, ist aber oft unnötig. Besser ist ein konkretes Verb plus Objekt („Termin buchen“, „Demo ansehen“). Wenn „Jetzt“ genutzt wird, sollte es nicht die Bedeutung ersetzen.
Was ist besser: Button links oder rechts?
Entscheidend ist Konsistenz im Produkt und der Flow. In mehrstufigen Abläufen steht „Weiter“ oft rechts und „Zurück“ links, weil das dem erwarteten Fortschritt entspricht. In Formularen zählt zusätzlich: Der CTA sollte dort stehen, wo der Blick nach dem letzten Feld landet.
Wann ist ein deaktivierter Button sinnvoll?
Deaktiviert ist sinnvoll, wenn erst eine Voraussetzung erfüllt werden muss (z. B. „AGB akzeptieren“). Wichtig ist, dass klar erkennbar ist, warum der Button deaktiviert ist (Hinweistext in der Nähe). Andernfalls wirkt es wie ein Fehler.
