So gestaltest du deine Buttons
wie ein Profi

6 + 1 Tipps für klickstarke Call to Actions

Klickstarke Buttons gestaltest du, indem du Farbe, Form, Schrift, Padding und Button-Text so kombinierst, dass dein Call to Action sofort auffällt, klar verständlich ist und zum Klicken einlädt. Denn ein Button ist nicht einfach nur eine Schaltfläche auf deiner Website. Er entscheidet mit darüber, ob Besucher weiterklicken, dein Angebot angucken, deinen Newsletter abonnieren oder deinen Kurs buchen. In diesem Beitrag zeige ich dir, welche 6 + 1 Regeln du bei deinen Buttons beachten solltest, damit sie geklickt werden.

Dieser Beitrag fällt unter die Kategorie „Mit kleinen Anpassungen einen riesigen Effekt erzielen“. Und das ist tatsächlich meine Lieblingsdisziplin.

Was ist ein Button?

Ein Button ist eine Schaltfläche auf einer Website, in einer App oder auf einem interaktiven Touchscreen (z. B. beim Geldautomaten). Durch einen Klick auf den Button öffnet sich

eine neue Seite,
ein neuer Tab in deinem Browser,
eine bestimmte Anwendung,
der nächste Schritt bei einer Installation oder einer Buchung.

Einfach genommen ist ein Button ein Textlink mit farbigem Hintergrund. Durch Farbe und Form bekommt er mehr Aufmerksamkeit als ein einfacher Textlink und regt zum Klicken an.

Textlink vs. Button

In einem Fließtext, wie z. B. einem Blogbeitrag, setzt du zur Verlinkung dennoch besser einen Textlink ein. So wie in diesem Beispiel:

Auch auf Grafiken kannst du (unechte) Buttons strategisch platzieren, um mehr Klicks zu erzeugen. Im Beitrag „So erstellst du deinen eigenen Linktree für deine Instagram Bio“ erfährst du, wie das funktioniert.

Würdest du hier auf einen Button klicken, der dich zu diesem Linktree-Beitrag bringt?

Eher nicht.

Buttons stehen selten allein oder mitten im Text, sondern sind integriert in einen Kontext. In der Regel ist das ein werblicher Zusammenhang, um einen Anmelde-, Buchungs- oder Kaufprozess in Gang zu setzen. Deine Website-Besucher sollen klicken. Das ist das Ziel.

Bei Apple und anderen großen Marken werden gerne gleich zwei Buttons nebeneinander gesetzt. Das sieht dann so aus:

3 Grundlagen für die Buttons auf deiner Website:

Gestalte deine Buttons einheitlich: Nutze immer dieselbe Form und Farbe und denselben Schriftstil. So gibst du deinen Website-Besuchern Orientierung und sorgst für Sicherheit.
Richte deine Buttons am Text aus. Damit stellst du einen direkten Zusammenhang zu deiner Botschaft her. Das heißt, wenn dein Text linksbündig steht, sollte der Button darunter auch links stehen.
Schenke auch dem Text auf deinem Button besondere Aufmerksamkeit und nutze mehr als nur ein Wort, denn nur „Klicken“ oder „Mehr“ überzeugt nicht.

6 + 1 Regeln für deine klickstarken Buttons

Wichtig für deine Buttons sind:

der Status des Buttons
die Form des Buttons
die Farbe des Buttons
die Schrift auf dem Button
die Innenabstände
alle Bestandteile zusammengesetzt

Das ist die Anatomie eines Buttons:

Ein Button besteht aus

der Hintergrundfarbe
dem Rahmen (Outline)
dem Eckenradius
dem Linktext
einem Icon (optional)

Den Link, also wohin der User beim Klick gelangt, erkennst du am Button selbst natürlich nicht. Den Link siehst du, wenn du mit der Maus über einen Button fährst unten links in deinem Browser.

10K Roadmap

für deine Website, die dir planbar hochwertige Anfragen bringt!

Du kannst dich jederzeit über einen Link in den E-Mails wieder aus dem Newsletter austragen. Weitere Informationen zur Verarbeitung deiner Daten findest du unter Datenschutz.

1. Status des Buttons

Das ist das Tolle: Deine Buttons sind nicht statisch. Sie können mit deinen Website-Besuchern interagieren, z. B. beim Hover, also beim Mauskontakt. Den jeweiligen Status deiner Buttons kannst du selbst festlegen.

Die wichtigsten Status sind

Standard (Basis-Farbe bei voller Deckkraft)
Hover (bei Mausberührung mit Anpassung der Hintergrundfarbe)
Aktiv (Button wird in diesem Moment geklickt)
Fokus (der Button ist über die Tastatur ausgewählt)
Ladevorgang (Aktion wird vom System verarbeitet)
Deaktiviert (Button hat keine Funktion und ist nicht klickbar)

Du kannst bei der Gestaltung deiner Buttons auch variieren, wie hier bei diesem Testbutton mit einer Hintergrundfarbe im Standard-Status und einem Rahmen beim Hover:

2. Form des Buttons

Hier gibt es nichts, das es nicht gibt. Aber: Tobe die nicht zu sehr aus und sorge unbedingt dafür, dass dein Button als solcher erkennbar bleibt.

Die Form deiner Buttons gestaltest du in erster Linie über den Eckenradius oder über einen Schatteneffekt.

Eckenradius 0 px

Eckenradius 6 px

Eckenradius 30 px

um mit 15 px verschobenem Box-Schatten

Gerade die Form des Buttons orientiert sich stark an deinem Website-Stil. Dasselbe gilt natürlich für die Farbe deiner Button:

3. Farbe des Buttons

Wenn alle anderen Faktoren stimmen, kann die Buttonfarbe über Erfolg oder Misserfolg bestimmen. Denn hier greift neben persönlichen Vorlieben die Farbpsychologie. Beim Button lösen die folgenden Farben die entsprechenden Trigger beim Betrachter aus:

Das heißt natürlich nicht, dass nun alle Buttons auf allen Websites idealerweise blau oder grün sein sollten. Auch ein roter Button kann ein hohes Aktivierungspotenzial haben – wenn die Farbe zum Branding insgesamt passt.

Du kannst auf deiner Website auch mal testen, welche Buttonfarbe für mehr Klicks sorgt.

4. Schrift auf dem Button

Auf die Größe kommt es an − auch bei der Schrift auf deinen Buttons. Ist die Schrift zu klein, ist der Text auf dem Button nicht gut lesbar und der Button verliert seine Relevanz. Ist die Schrift zu groß, erscheint der gesamte Button aufdringlich und schreckt deine User im schlimmsten Fall ab.

niedrige Priorität
Schriftgröße 16 px

mittlere Priorität
Schriftgröße 20 px

hohe Priorität
Schriftgröße 24 px

Setze die Schrift auf deinen Buttons ein wenig größer als deinen regulären Fließtext. Achte auch auf die Zeilenhöhe deiner Schrift: Denn ein längerer Text auf dem Button, der in der mobilen Ansicht eventuell in zwei Zeilen steht, sollte keine vergrößerte Zeilenhöhe haben.

Pro Tipp

Setze den Text auf deinen Buttons nicht in Versalien. Die normale Schrift ist besser lesbar.

5. Innenabstände (=Padding)

Um deinen Buttons ein ausgewogenes Design zu verleihen, kannst du vor allem links und rechts das Padding erhöhen:

Erhöhst du das Padding links und rechts auf 40 oder 50 px wertest du deine Buttons unheimlich auf und machst sie im jeweiligen Kontext zu Klickmagneten.

6. So sieht der ideale Button aus

Betrachtest du alle Empfehlungen von Designern und Studien aus der Verkaufspsychologie, kannst du dir das Ausprobieren und die Farbtüftelei sparen:

Demnach ist der „perfekte“ Button blau mit weißer Schrift, hat einen komplett abgerundeten Eckenradius und rechts und links ein großzügiges Padding.

Call to Action richtig texten

Neben der Form, Hintergrund- und Textfarbe, dem Schriftstil, Padding, Hover, etc. steht und fällt natürlich alles mit deinem Linktext.

„Klick hier“ klingt dabei wie ein Befehl. Mit der Peitsche.

„Hier klicken“ ist schon besser, sagt aber nicht nichts aus.

Gut ist es, wenn du deinem Button-Text Kontext gibst, und deine Besucher verstehen, was beim Klick auf den Button geschieht:

„Melde dich an“

„Buch dir dein Gespräch“

„Downloade das PDF“

Oder vielleicht „Jetzt Angebot sichern“

Du siehst: Design und Text sind BFF. Immer.

FAQ: Häufige Fragen zur Button-Gestaltung

Was macht einen guten Button auf einer Website aus?

Ein guter Button ist klar erkennbar, gut lesbar und führt deine Website-Besucher zum nächsten sinnvollen Schritt. Dafür müssen Farbe, Form, Schrift, Padding und Button-Text zusammenpassen.

Wo sollte ich Buttons auf meiner Website einsetzen?

Buttons eignen sich vor allem dort, wo du eine klare Handlung auslösen möchtest: z. B. eine Anmeldung, Buchung, Anfrage oder einen Kauf. Mitten im Fließtext ist ein normaler Textlink oft die bessere Wahl.

Welche Farbe sollte ein Button haben?

Die Buttonfarbe sollte sich deutlich vom Rest deiner Website abheben und trotzdem zu deinem Branding passen. Wichtig ist, dass der Button auffällt und als klickbares Element erkennbar ist. Welche Farbe am besten funktioniert, kannst du auch testen.

Wie sollte der Text auf einem Button formuliert sein?

Der Button-Text sollte klar sagen, was nach dem Klick passiert. Statt nur „Klicke hier“ zu schreiben, funktionieren konkrete Formulierungen besser, zum Beispiel „Hier für 0€ anmelden“, „Jetzt Angebot holen“ oder „In den Warenkorb legen“. Vier Wörter sind genug.

Warum ist das Padding bei Buttons wichtig?

Padding ist der Innenabstand zwischen Button-Text und Button-Rand. Genug Padding sorgt dafür, dass dein Button hochwertiger wirkt, besser lesbar ist und auf Desktop und Smartphone leichter geklickt werden kann.