Für ein einheitliches Erscheinungsbild stellt OBS eine Button-CSS-Vorlage bereit. Dieser Beitrag erklärt die Button-Typen, wie Du eigene Gruppen anlegst und wo Du die Vorlage herunterlädst.
Die Button-Vorlage
Für ein einheitliches Erscheinungsbild der Buttons stellt OBS eine CSS-Datei bereit. Sie definiert die Zustände aktiv, deaktiviert und Hover und enthält vier Button-Typen als Ausgangspunkt.
Button-Typen
| Typ | Wofür er gedacht ist |
|---|---|
| Primär | zentrale Aktionen wie „In den Warenkorb“ oder „Jetzt kaufen“; auffällig gestaltet |
| Sekundär | unterstützende Aktionen wie „Modell auswählen“ oder „Zur Kasse“; dezenter, meist am häufigsten verwendet |
| Tertiär | nachrangige Aktionen |
| Link | als Textlink gestalteter Button |
Jede Gruppe bringt eigene CSS-Variablen mit, über die Du Farben, Größen und weitere Eigenschaften steuerst.
Eigene Button-Gruppen anlegen
- Kopiere den CSS-Variablen-Block einer bestehenden Gruppe.
- Setze die gewünschten Selektoren vor den kopierten Block und entferne diese Selektoren
- Passe die Variablen an (Farben, Größen …).
- Binde den Code in Deine WordPress-Seite oder eine CSS-Datei ein.
aus den anderen Blöcken – jeder Selektor gehört nur zu einer Gruppe.
Download
Die fertige Vorlage steht zum direkten Verwenden bereit:
- obs-css-button-variable-v1.1.css
- obs-css-button-variable-v1.2.1.css (mit BFSG-Anpassungen)
WEITERLESEN