Vergib eine der drei Klassen — c-btn--primary, c-btn--secondary oder c-btn--link. Farbe, Form, Abstand und Hover-Verhalten kommen automatisch mit.
Die drei Arten
| Klasse | Aussehen | Wofür |
|---|---|---|
c-btn--primary |
Gefüllt in der Markenfarbe | Die eine wichtigste Aktion — „Termin buchen“, „Anfrage senden“ |
c-btn--secondary |
Weiß mit farbigem Rahmen | Nebenaktion — „Mehr erfahren“, „Leistungen ansehen“ |
c-btn--link |
Textlink, kein Kasten | Weiterführender Hinweis innerhalb von Text oder in einer Karte |
So gehst du vor
- Button-Widget einfügen.
- Im Reiter Inhalt Text und Ziel-Link eintragen.
- Im Reiter Stil im Feld Klassen eintragen:
c-btn--primary.
Platzhalter — Bild wird nachgerüstet.
Nur ein primärer Button pro Abschnitt
Der gefüllte Button ist ein Wegweiser. Stehen zwei davon nebeneinander, muss der Besucher wählen — und wählt oft keinen. Die Regel: ein primary pro Bildschirmabschnitt, alles andere secondary oder link.
Ein häufiges Muster: c-btn--primary für „Termin vereinbaren“, direkt daneben c-btn--secondary für „Leistungen ansehen“. Beide in einem Container mit l-cluster, damit sie nebeneinander liegen und mobil untereinander umbrechen.
Hover-Verhalten
Musst du nicht einstellen. Der primäre Button dunkelt beim Überfahren ab, der sekundäre färbt sich zart ein, der Link wird unterstrichen. Dasselbe passiert bei Tastatur-Navigation — wichtig für Barrierefreiheit.
local pink markiert ist. Er gewinnt dann dauerhaft gegen c-btn--primary — auch dann, wenn die Button-Farbe später zentral geändert wird. Dieser eine Button bleibt stehen, und man findet ihn nur durch Durchsehen aller Seiten wieder.