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:
6 + 1 Tipps für klickstarke Call to Actions
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.
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
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.
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:
Ein Button hat verschiedene Bestandteile:
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.
PDF für 0 €
So machst du 2024 noch aus deiner Website eine Cash Machine!
Abonniere meinen Newsletter und du erhältst die 11 Rezepte für deine verkaufsstarke Website für 0 Euro.
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.
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
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:
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.
Gerade die Form des Buttons orientiert sich stark an deinem Website-Stil. Dasselbe gilt natürlich für die Farbe deiner Button:
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.
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.
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.
Um deinen Buttons ein ausgewogenes Design zu verleihen, kannst du vor allem links und rechts das Padding erhöhen:
Durch das Padding wertest du deine Buttons unheimlich auf und machst sie im jeweiligen Kontext zu Klickmagneten.
Betrachtest du alle Empfehlungen von Designern und Studien von Verkaufspsychologen, 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.
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.
Business-Websites, die verkaufen:
Mit klarem Design und genialem Content, der ins Hirn und Herz deiner Zielgruppe geht. Damit du genau die Menschen anziehst, die zu dir passen.
© Frau König, 2024
Hol dir hier die 11 Rezepte für deine verkaufsstarke Website:
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.
