Welche Vorteile bieten CSS gestylte Buttons gegenüber Buttons aus Bildern?
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?
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:
Vorschau: Konsolidierte Vorlage für CSS-Button
Wer eine Option ohne Code-Bausteine sucht, der kann relevante Einstellungen wie folgt umsetzen:
Vorschau: WordPress Editor mit relevanten Einstellungen am Beispiel des Button-Blocks von GeneratePress