Blog Layout

Button-Farben auf Webseiten

Button ist nicht gleich Button! In der Regel gibt es auf Webseiten folgende drei Buttons:


  • Primäre Buttons
  • Sekundäre Buttons
  • Share-Buttons

Warum unterschiedliche Buttonfarben so wichtig sind

Unterschiedliche Button-Farben eignen sich besonders gut, um einen Website-Nutzer Führung zu geben, damit eine Aktion ausgeführt wird - also ein "Klick". Es ist wissenschaftlich bewiesen, dass Button-Farben einen direkten Einfluss auf das Klickverhalten der Nutzer haben. In der Regel gibt es auf einer Website 3 Buttonarten. Die wichtigsten sind die Primären und Sekundären Buttons.

Primäre Buttons

Primäre Buttons werden auf Webseiten für das primäre Klick-Ziel verwendet. Das kann zum Beispiel "jetzt Anrufen" sein. Dabei ist es wichtig, dass jede Seite einer Website nur ein primäres Klick-Ziel hat! Die primären Buttons müssen unbedingt besonders hervorstechen. Hierfür eigenen sich zum Bespiel Komplementärfarben: Ist Deine Marke grün, dann bietet sich z.B. Orange als Buttonfarbe sehr gut an. Wichtig ist auch, dass zwei primäre Buttons niemals in unmittelbarer Nähe platziert werden.

Sekundäre Buttons

Sekundäre Buttons sind Buttons, die nicht direkt zum Hauptziel führen, sondern zu einer anderen Seite. Ein beliebter sekundärer Button ist zum Bespiel "erfahre mehr" oder "weiter". Hier ist es wichtig, dass der sekundäre Button keinesfalls optisch in Konkurrenz zum primären Button stehen darf. Die meisten sekundären Buttons sind oft in einem Grauton oder sogar transparent. Eine Komplementärfarbe zum primären Button funktioniert aber auch gut. Aufgrund des Farbunterschieds dürfen sekundäre Buttons direkt neben primäre Buttons platziert werden.

Share-Buttons

Share-Buttons führen nach einem Klick weg von Deiner Website. Sie werden gern genutzt, um zum Beispiel Blogbeiträge auf Sozialen Netzwerken zu teilen. Hier ist es wichtig, dass der Nutzer sofort sieht, um welches Netzwerk es sich handelt. Das geht natürlich am besten mit Farben! Wenn Du zum Beispiel einen Share-Button zu Facebook verwendest, dann nutze am besten das originale Facebook-Blau mit dem Text "auf Facebook teilen".

Vorsichtig allerdings: zu viele bunte Share-Buttons in unmittelbarer Nähe wirken oft zu bunt und lenken vom Hauptziel des primären Buttons leicht ab. Falls Du viele Share-Buttons neben einen primären Button platzieren musst, dann nutze besser eine einheitliche Farbe oder einen Grauton dafür. Priorität hat immer der primäre Button auf Deiner Seite!

weitere wichtige Website-Tipps
Share by: