» Warum Kaufen-Buttons unsichtbar bleiben
Der häufigste Fehler ist gut gemeint: Der Button soll „dezent“ sein, damit er das Design nicht stört. Das Ergebnis ist ein grauer Button auf hellem Grund – ästhetisch, aber wirkungslos. Ein Call-to-Action, der sich einfügt, wird übersehen. Punkt.
Die vier klassischen Probleme:
- Keine Kontrastfarbe: Der Button trägt dieselbe Farbwelt wie der Rest der Seite und geht unter.
- Unklarer Text: „Hier klicken“ oder „Mehr erfahren“ sagt nicht, was der Besucher davon hat.
- Falsche Platzierung: Ein einziger Button, versteckt am Ende einer langen Seite.
- Mobil unbrauchbar: Zu klein, zu eng an anderen Links – am Desktop hübsch, am Daumen vorbei.
Ein unsichtbarer Call-to-Action ist wie ein Ladenschild ohne Beleuchtung: Es existiert, aber niemand nimmt es wahr. Übrigens auch 2026 noch ein Dauerproblem – gerade KI-generierte Websites sehen oft elegant aus, verstecken aber genau diesen einen entscheidenden Klick.
» 1. Auffälligkeit: Der Button muss ins Auge springen
Dein Button braucht eine Farbe, die sich klar von der Umgebung abhebt – idealerweise eine Akzentfarbe, die du sonst sparsam einsetzt. Wenn deine Seite in warmen Beigetönen gehalten ist, sticht ein tiefes Rot heraus. Wenn alles blau ist, funktioniert Orange.
Die alte Streitfrage „Welche Farbe konvertiert am besten?“ hat eine unspektakuläre Antwort: Es gibt keine magische Kaufen-Farbe. Es gewinnt immer die Farbe mit dem stärksten Kontrast zur Umgebung. Wie Farben grundsätzlich auf Vertrauen und Kaufentscheidungen wirken, liest du in meinem Artikel über die Macht der Farben im Webdesign.
Tipp: Prüfe auch den Kontrast zwischen Buttonfarbe und Buttontext. Weiße Schrift auf Pastellgrün sieht am Monitor gut aus – und ist draußen in der Sonne unlesbar.
» 2. Klarheit: Der Text muss sofort überzeugen
Vergiss Floskeln. Ein Button ist ein Versprechen in zwei bis vier Wörtern – er sagt, was nach dem Klick passiert und was der Besucher davon hat:
- „Jetzt kaufen“ statt „Weiter“
- „Kostenlos testen“ statt „Mehr erfahren“
- „Platz sichern“ statt „Kontakt“
- „Erstgespräch buchen“ statt „Absenden“
Die Formel dahinter: Verb plus Nutzen. Der Besucher soll nicht rätseln müssen, ob sich der Klick lohnt – der Button beantwortet die Frage, bevor sie gestellt wird.
» 3. Platzierung: Der richtige Ort entscheidet
Ein einziger Button am Seitenende reicht nicht. Deine Besucher entscheiden an unterschiedlichen Stellen – manche sofort, manche erst nach dem dritten Argument. Die Regel: Der nächste Klick ist nie mehr als einen Bildschirm entfernt.
Die drei wichtigsten Positionen:
- Above the Fold: sichtbar ohne Scrollen, direkt bei deiner Hauptbotschaft. Warum dieser erste Bildschirm über Bleiben oder Gehen entscheidet, habe ich im Artikel über Above the Fold als Verkaufsbooster ausführlich gezeigt.
- Nach dem Angebot: Genau in dem Moment, in dem der Nutzen klar ist, kommt die Handlungsaufforderung.
- Am Seitenende: Wer bis hierhin gelesen hat, ist interessiert – lass diese Person nicht ohne nächsten Schritt zurück.
Tipp: Gleiche Aktion, gleicher Buttontext an allen Stellen. Drei verschiedene Aufforderungen auf einer Seite verwirren mehr, als sie helfen.
» 4. Mobil zuerst: Der Daumen ist dein wichtigster Nutzer
Dieser Punkt fehlte in der ersten Version dieses Artikels – heute ist er der wichtigste. Über 60 Prozent deiner Besucher kommen vom Smartphone. Ein Button, der sich mit dem Daumen nicht sicher treffen lässt, ist unsichtbar, egal wie schön er am Desktop leuchtet.
Die Basics:
- Mindestens 44 × 44 Pixel Tippfläche – lieber größer.
- Abstand zu anderen Links, damit kein Fehlklick passiert.
- Volle Breite auf kleinen Screens wirkt oft am besten – der Button wird unübersehbar.
- Hover-Effekte reichen nicht: Am Touchscreen gibt es kein „Darüberfahren“. Der Button muss im Ruhezustand wie ein Button aussehen – erhaben, farbig, klickbar.
Tipp: Öffne deine Website jetzt am eigenen Handy und versuche, mit dem Daumen zu buchen. Wenn du zoomen musst, weißt du, was zu tun ist.
» Die Brücke zwischen Angebot und Entscheidung
Ein Kaufen-Button wirkt klein, trägt aber die ganze Last: Er ist die Brücke zwischen deinem Angebot und der Entscheidung deiner Besucher. Er hebt sich farblich ab, formuliert eine klare Botschaft, steht an den richtigen Stellen und funktioniert am Daumen genauso gut wie an der Maus.
Genau nach diesen Regeln baue ich jede Website in meinem Angebot „In 7 Tagen online“ – jeder Call-to-Action hat dort einen Job, eine Farbe und einen klaren nächsten Schritt. Denn eine schöne Seite ohne sichtbaren Button ist Dekoration. Eine Seite mit sichtbarem Button ist ein Verkäufer.
Häufige Fragen
Warum klickt niemand auf meinen Kaufen-Button?
Meist aus einem von vier Gründen: Der Button hebt sich farblich nicht ab, der Text sagt nicht, was passiert („Hier klicken“), er steht an der falschen Stelle – etwa nur ganz unten auf der Seite – oder er ist auf dem Smartphone zu klein zum Antippen. Alle vier Probleme lassen sich ohne Redesign beheben.
Welche Farbe sollte ein Call-to-Action-Button haben?
Es gibt keine magische Kaufen-Farbe – entscheidend ist der Kontrast. Der Button braucht eine Akzentfarbe, die sonst nirgendwo auf der Seite dominiert, damit das Auge sofort hängen bleibt. Wichtig außerdem: genug Kontrast zwischen Buttonfarbe und Schrift, damit er auch mobil und bei Sonnenlicht lesbar bleibt.
Wo platziere ich den Call-to-Action am besten?
Mindestens dreimal: einmal sichtbar ohne Scrollen im ersten Bildschirmbereich (Above the Fold), einmal direkt nach deinem Angebot und einmal am Seitenende. Besucher entscheiden an unterschiedlichen Stellen – der nächste Klick sollte nie mehr als einen Bildschirm entfernt sein.
Wie groß muss ein Button auf dem Smartphone sein?
Als Faustregel: mindestens 44 × 44 Pixel Tippfläche, mit Abstand zu anderen Links. Über 60 Prozent deiner Besucher kommen mobil – ein Button, der sich mit dem Daumen nicht sicher treffen lässt, ist praktisch unsichtbar. Teste jede Seite am eigenen Handy.