So gestaltest du deine Buttons
wie ein Profi

6 + 1 Tipps für klickstarke Call to Actions

Buttons gestalten wie ein Profi

Ein Button ist nicht gleich ein Button. Auf deiner Website sind Buttons echte Klickmagneten für deine Call to Actions, wenn du die 6 +1 simplen Regeln rund um Farbe, Schrift und Padding beachtest. Erfahre hier, wie du Buttons gestaltest, die wirklich 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 Klicks zu erhalten. 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:

So gestaltest du deine Buttons 1
Screenshot von apple.com

3 Grundlagen für die Buttons auf deiner Website:

  1. 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. 
  2. Richte deine Buttons am Text aus. Damit stellst du einen direkten Zusammenhang zu deiner Botschaft her.
  3. Schenke auch dem Text auf deinem Button besondere Aufmerksamkeit und nutze mehr als nur ein Wort
Buttons gestalten, sodass sie geklickt werden

Hier sind die 6 + 1 Regeln für deine klickstarken Buttons

1. Anatomie des Buttons

Ein Button hat verschiedene Bestandteile:

  • die Hintergrundfarbe
  • den Rahmen
  • ein Icon (optional)
  • den Eckenradius
  • den Linktext
  • den Link
Anatomie des Buttons

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.

Design-Vorlagen
für WordPress

Fertig gestaltete und voll anpassbare Vorlagen für den einfachen Aufbau deiner Homepage!

Deine Wow-Website mit Design-Vorlagen für WordPress aus dem Frau König Studio

2. 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

Status des Buttons

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:

3. 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.

So gestaltest du deine Buttons 2

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

4. 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:

Button-Farben

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.

5. Schrift 

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.

Schrift auf Buttons

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 Call to Action auf dem Button kann in der mobilen Ansicht in zwei Zeilen stehen.

Pro Tipp

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

6. Innenabstände (= Padding)

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

So gestaltest du deine Buttons 3

Durch das Padding wertest du deine Buttons unheimlich auf und machst sie im jeweiligen Kontext zu Klickmagneten.

7. So sieht der ideale Button aus

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

So sieht der perfekte Button aus

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 ein liebevolles Angebot für deine Website-BesucherInnen.

Oder

“Hier kostenlos anmelden”

“Hier klicken und anmelden”

Oder vielleicht doch mit ein wenig Druck: “Jetzt Angebot holen”

Du siehst: Design und Text sind BFF. Immer.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Design-Vorlagen für WordPress

Fertig gestaltete und voll anpassbare Vorlagen
für den einfachen Aufbau deines Onepagers!

Design-Vorlagen für WordPress