Beispiele & Scripte » Layout: Hilfe zur Anpassung der Buttons per CSS

Layout: Hilfe zur Anpassung der Buttons per CSS

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:

  1. Kopieren Sie den CSS-Variablen-Block.
  2. 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.
  3. Ändern Sie die Variablen, um Farben, Größen oder andere Eigenschaften anzupassen.
  4. Fügen Sie den Code in Ihre WordPress-Seite oder eine CSS-Datei ein.

Download:

Inhalt

Hilfecenter: