Diese Anleitung bietet einen Überblick über die Gestaltung und Verwendung von Buttons mithilfe der bereitgestellten CSS-Datei. Die Buttons sind für verschiedene Anwendungsfälle definiert und bieten ein konsistentes Design für aktive, deaktivierte und Hover-Zustände. Am Ende dieser Seite befindet sich eine CSS Datei zum Download die Sie direkt verwenden können. Enhalten sind bereits die Button-Typen Primär, Sekundär, Tertiäre und ein Link.
Button-Typen
Die CSS-Datei enthält Variablen und Stile für folgende Button-Kategorien:
Primäre Buttons:
Werden für zentrale Aktionen wie „In den Warenkorb“ oder „Jetzt kaufen“ verwendet. Sie sind auffällig gestaltet, um die Aufmerksamkeit der Benutzer zu erregen. Beispiele:

Sekundäre Buttons:
Werden für unterstützende Aktionen wie „Modell auswählen“ oder „Zur Kasse“ genutzt. Sie sind etwas dezenter gestaltet und machen meist den größten Teil der Buttons aus. Beispiele:

Tertiäre Buttons:
Werden für weitere Funktionen wie „Weiter einkaufen“ oder „Mehr Produkte laden“ verwendet. Beispiele:

Link-Buttons:
Dienen zur Navigation oder weniger wichtigen Aktionen wie „Alle anzeigen“ oder „Mehr anzeigen“. Beispiele:

Zustände der Buttons
Jeder Button unterstützt bis zu drei Zustände:
- Aktiv: Standarddarstellung eines Buttons.
Eigenschaften: Auffällige Farben, klare Konturen, zentrierter Text. - Hover: Wird angezeigt, wenn der Mauszeiger über dem Button schwebt.
Eigenschaften: Änderung der Hintergrundfarbe und Rahmen zur visuellen Rückmeldung. - Deaktiviert: Für nicht verfügbare Aktionen.
Eigenschaften: Blasse Farben, keine Interaktionsmöglichkeit.
Gestaltungselemente
Die Buttons basieren auf CSS-Variablen für eine einfache Anpassung.
{
/* button - active */
--obs-main-button-active-padding: 11px 21px;
--obs-main-button-active-border-radius: 20px;
--obs-main-button-active-text-decoration: none;
--obs-main-button-active-text-align: center;
--obs-main-button-active-text-transform: none;
--obs-main-button-active-letter-spacing: normal;
--obs-main-button-active-line-height: 1;
--obs-main-button-active-font-weight: 400;
--obs-main-button-active-font-size: 16px;
--obs-main-button-active-color: white;
--obs-main-button-active-border: 1px solid transparent;
--obs-main-button-active-background-color: #53b732;
--obs-main-button-active-width: 100%;
/* button - active - hover */
--obs-main-button-active-hover-color: black;
--obs-main-button-active-hover-border: 1px solid #d0d0d0;
--obs-main-button-active-hover-text-decoration: none;
--obs-main-button-active-hover-text-transform: none;
--obs-main-button-active-hover-background-color: #d0d0d0;
/* button - disable */
--obs-main-button-disabled-padding: 11px 21px;
--obs-main-button-disabled-border-radius: 20px;
--obs-main-button-disabled-text-decoration: none;
--obs-main-button-disabled-text-align: center;
--obs-main-button-disabled-text-transform: none;
--obs-main-button-disabled-letter-spacing: normal;
--obs-main-button-disabled-line-height: 1;
--obs-main-button-disabled-font-weight: 400;
--obs-main-button-disabled-font-size: 16px;
--obs-main-button-disabled-color: #d0d0d0;
--obs-main-button-disabled-border: 1px solid #d0d0d0;
--obs-main-button-disabled-background-color: white;
--obs-main-button-disabled-width: 100%;
/* button - disable - hover */
--obs-main-button-disabled-hover-color: #d0d0d0;
--obs-main-button-disabled-hover-border: 1px solid #d0d0d0;
--obs-main-button-disabled-hover-text-decoration: none;
--obs-main-button-disabled-hover-text-transform: none;
--obs-main-button-disabled-hover-background-color: white;
}
Button-Selektoren
Die CSS-Datei enthält spezifische Selektoren für verschiedene Anwendungsbereiche, wie z. B.:
- Button cart selectors:
- #obs-cart button#obs-cart-overview-continue,
- #obs-cart button#obs-cart-address-continue,
- #obs-cart .obs-cart-container-payment button.btn-dark.obs-cart-btn-dark,
- #obs-cart button#obs-cart-contact-continue,
- #obs-cart button#obs-cart-confirm-order
- Button offcanvas selectors:
- .offcanvas-body button.obs-cart-btn-dark,
- .offcanvas-body button.btn-outline-secondary
- Button product page selectors:
- .obs-product-buy-button.obs-button-active a,
- .obs-product-buy-button.obs-button-disabled a,
- .obs-product-model-table-more.obs-button-active a
- Button model shortcode selectors:
- .obs-model-selection-show.obs-button-active a,
- .obs-model-selection-show.obs-button-disabled a
- Button: category page selectors:
- .obs-product-filter-button-toggle.obs-button-active a,
- .obs-product-filter-button.obs-button-active a,
- .obs-product-filter-remove-button.obs-product-button.obs-button-active a,
- .obs-button-active-load-more.obs-button-active a
- Button reset password selectors:
- button#obs-reset-password-request-code
- Button create customer account selectors:
- button#obs-create-account-create
- Button view order selectors:
- #obs-order-details button#obs-order-details-submit
Anpassungen und weitere Button Gruppen anlegen
Um das Design an Ihre Bedürfnisse anzupassen, ändern Sie die Variablen der entsprechenden Button-Gruppe. Um eine weitere Button-Gruppe zu erstellen, gehen Sie wie folgt vor:
- Kopieren Sie den CSS-Variablen-Block.
- Schreiben Sie die gewünschten Selektoren für die Buttons vor den CSS-Variablen-Block und entfernen die Selektoren von den anderen CSS-Blöcken. Selektoren sollten nur einem CSS-Variablen-Block zugewiesen werden.
- Ändern Sie die Variablen, um Farben, Größen oder andere Eigenschaften anzupassen.
- Fügen Sie den Code in Ihre WordPress-Seite oder eine CSS-Datei ein.