Welche Vorteile bieten CSS gestylte Buttons gegenüber Buttons aus Bildern?

Oliver F.
2024-06-14
Avatar-Foto

Auch wenn es eine komfortable Übergangslösung zu sein scheint, ist es empfehlenswert Buttons bzw. Schaltflächen wie Call-to-Actions (CTA) mit CSS zu gestalten.

Cascading Style Sheets (Abkürzung CSS) sind stufenförmig bzw. hintereinander angelegte (kaskadierende) Stilvorlagen im Webdesign. CSS ist eine durch das World-Wide-Web Consortium (W3C) deklarierte Programmiersprache, die das herkömmliche HTML ergänzt. 

Ein Button als Bild hat im Vergleich zur Verwendung von CSS sieben Nachteile:

  • Statische Anpassung: Änderungen an Farbe, Größe, Form oder Textur erfordern zusätzliche Bilddateien
  • Nicht-Responsive: Passen sich nicht automatisch an verschiedene Bildschirmgrößen an.
  • Begrenzte Interaktivität: Hover-Effekte schwer umsetzbar / zusätzliche Skript- und Bilddateien nötig
  • Größere Dateigrößen: Bilddateien erhöhen Ladezeiten der Webseite
  • Konsistenz im Design: CSS ermöglicht eine konsistente Gestaltung von Buttons über die gesamte Webseite hinweg
  • Eingeschränkte Barrierefreiheit: Text in Bildern für Screenreader und andere Hilfstechnologien nicht zugänglich
  • SEO: Texte im Bild sind für Suchmaschinen schwieriger lesbar

Ein Beispiel für Bild-basierte Schaltflächen ist in diesem Chat mit Oliver zum Thema Was ist ein Alt-Text verfügbar.

Sehr gut, danke. Welche CSS-Vorlage könnte ich für die neuen Button verwenden?

Oliver F.
2024-06-17
Avatar-Foto

Bei der Gestaltung von CSS-basierten Buttons sind mehrere Best Practices zu beachten, um diese optimal auf einer Website einzubinden. Mit folgendem Vorgehen werden alle oben genannten 7 Punkte berücksichtigt:

Schritt 1: Grundlegende Struktur als HTML erstellen

  • Beispiel: <button type="button" class="btn">Text der Schaltfläche</button>
  • <button> Element bewahrt Semantik
  • Beschreibender "Text der Schaltfläche" mit Hauptsuchbegriff der Zielseite

Schritt 2: Unterstützung für "Accessibility" im HTML ergänzen

  • Beispiel: aria-label="Text der Schaltfläche"
  • Aria-Lable fördert Verständlichkeit für Nutzer von Screenreader-Software

Schritt 3: Formatierung der Schaltfläche als CSS festlegen

  • Beispiel: .btn { background-color: #2862b1; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; text-align: center; }
  • Formatierungselemente: Hintergrundfarbe, Textfarbe, Innenabstand, Rahmen, Rahmenradius, Reaktion bei Mauskontakt, Textgröße, Textausrichtung

Schritt 4: Anpassung bei kleineren Bildschirme im CSS ergänzen

  • Beispiel: @media (max-width: 600px) { .btn { width: 100%; padding: 15px; } }
  • Auf Smartphones die Breite des Buttons erweitern

Schritt 5: Interaktive Elemente im CSS ergänzen 

  • Beispiel: .btn:hover, .btn:focus { background-color: #a5c33a; outline: none; }
  • Bei Mauskontakt oder durch Fokussieren mit der Tastatur ändert sich die Hintergrundfarbe

Schritt 6: Sichtbarkeit des Buttons über CSS erhöhen

  • Beispiel: .btn:focus { outline: 2px dashed #a5c33a; outline-offset: 2px; }
  • Einbettung des Buttons in die Umgebung
  • Schrift- und Hintergrundfarbe mit hohem Kontrastverhältnis

Schritt 7: CSS Bausteine zusammenfassen

  • Aufhebung redundanter Elemente bzw. Inhalte von CSS-Dateien
  • Beschleunigung durch kritische CSS-Stile direkt im HTML-Kopfbereich

Die folgende Kopier-Vorlage steht auf CodePen zur Verfügung:

CSS Button in CodePen - HTML + CSS Vorlage

Vorschau: Konsolidierte Vorlage für CSS-Button

Wer eine Option ohne Code-Bausteine sucht, der kann relevante Einstellungen wie folgt umsetzen: 

Button Einstellungen im WP Backend - Alternative ohne Coding

Vorschau: WordPress Editor mit relevanten Einstellungen am Beispiel des Button-Blocks von GeneratePress 

Schreiben Sie einen Kommentar