WMP Sites
Home Webentwicklung Frontend-Entwicklung HTML Grundlagen Responsive Design Webdesign

HTML-Schaltflächenfarbe anpassen: Schritt-für-Schritt-Anleitung

Lukas Fuchs vor 7 Monaten in  Webentwicklung 3 Minuten Lesedauer

CSS-Stile für Schaltflächenfarben anwenden

CSS (Cascading Style Sheets) bietet eine elegante Möglichkeit, die Farbe von HTML-Schaltflächen anzupassen. Mithilfe von Stilen kannst du die Farbe von Schaltflächen sowohl im Normalzustand als auch in Hover- und Fokuszuständen festlegen.

Anwenden von Stilen

Um Stile auf eine HTML-Schaltfläche anzuwenden, verwendest du die style-Eigenschaft innerhalb des <button>-Tags. Die style-Eigenschaft nimmt eine durch Semikolons getrennte Liste von Stildeklarationen an.

<button style="background-color: #007bff;">Button</button>

Im obigen Beispiel wird die Hintergrundfarbe der Schaltfläche auf Blau gesetzt. Du kannst auch andere Stileigenschaften wie color (Schriftfarbe), border-color (Rahmenfarbe) und box-shadow (Schlagschatten) anpassen.

Style-Sheets verwenden

Alternativ kannst du Style-Sheets verwenden, um Stile auf alle Schaltflächen auf einer Seite anzuwenden. Erstelle dazu eine neue CSS-Datei mit der Endung .css und füge die folgenden Stile hinzu:

button {
  background-color: #007bff;
  color: #fff;
  border: none;
}

Verknüpfe die CSS-Datei dann mit deiner HTML-Seite, indem du den folgenden Code in den <head>-Bereich einfügst:

<link rel="stylesheet" href="style.css">

Dies wendet den Stil auf alle Schaltflächen auf deiner Seite an.

Beispiel

Hier ist ein Beispiel für eine blaue Schaltfläche mit abgerundeten Ecken und weißen Symbolen:

<button style="
  background-color: #007bff;
  color: #fff;
  border-radius: 5px;
  padding: 10px 20px;
">
  <i class="fa fa-check"></i>
  Button
</button>

Farbattribute für Schaltflächenelemente verwenden

Schaltflächenelemente in HTML verfügen über Farbattribute, mit denen du die Hintergrund- und Textfarbe deiner Schaltflächen anpassen kannst. Hier sind die relevantesten Attribute:

Zusätzliche Details erhältst du bei: HTML-Code-Tag: Das grundlegende Element der Webentwicklung

Hintergrundfarbe

Um die Hintergrundfarbe einer Schaltfläche festzulegen, verwende das Attribut background-color.

<button style="background-color: #ff0000;">Rote Schaltfläche</button>

Du kannst Hexadezimalcodes, RGB-Werte oder Farbnamen verwenden, um die Farbe zu definieren.

Textfarbe

Um die Textfarbe einer Schaltfläche festzulegen, verwende das Attribut color.

<button style="color: #ffffff;">Weißer Text auf roter Schaltfläche</button>

Die Textfarbe ist besonders wichtig für die Barrierefreiheit, da sie die Lesbarkeit deiner Schaltflächen für Benutzer mit eingeschränktem Sehvermögen sicherstellt.

Vorteile der Verwendung von Farbattributen

Die Verwendung von Farbattributen bietet mehrere Vorteile:

  • Flexibilität: Du kannst die Farben deiner Schaltflächen jederzeit einfach ändern, indem du die CSS-Dateien aktualisierst.
  • Konsistenz: Du kannst Farbattribute verwenden, um sicherzustellen, dass alle Schaltflächen auf deiner Website ein einheitliches Farbschema aufweisen.
  • Barrierefreiheit: Die Verwendung der richtigen Farbkombinationen kann die Barrierefreiheit deiner Schaltflächen für Nutzer mit eingeschränkter Farbwahrnehmung oder Sehschwäche verbessern.

Best Practices für die Farbwahl

  • Verwende kontrastreiche Farben für Hintergrund und Text, um die Lesbarkeit zu verbessern.
  • Vermeide die Verwendung von Farben, die für Benutzer mit eingeschränkter Farbwahrnehmung schwer zu unterscheiden sind.
  • Berücksichtige die Farbschemata deiner Website und Marke, um ein kohärentes Erscheinungsbild zu gewährleisten.
  • Teste deine Schaltflächen mit verschiedenen Farben, um sicherzustellen, dass sie in allen Browsern und Geräten korrekt angezeigt werden.

Schaltflächenfarben mit Hover- und Fokuszuständen anpassen

Wenn du mit deiner Maus über eine Schaltfläche fährst oder sie mit der Tastatur auswählst, ändern sich ihre Farben oder Effekte häufig. Diese Zustände werden als Hover- bzw. Fokuszustände bezeichnet und können dir dabei helfen, die Benutzerfreundlichkeit und Visiten deiner Schaltflächen zu verbessern.

Hover-Zustände

Der Hover-Zustand wird ausgelöst, wenn du mit der Maus über eine Schaltfläche fährst. Dieser Zustand ist eine hervorragende Möglichkeit, Benutzern ein Feedback zu geben, dass sie mit der Schaltfläche interagieren können.

Um den Hover-Zustand anzupassen, kannst du die Pseudoklasse :hover zu deinem CSS-Regelsatz hinzufügen.

button:hover {
  background-color: #0099ff;
}

Fokuszustände

Der Fokuszustand wird ausgelöst, wenn eine Schaltfläche mit der Tastatur ausgewählt wird. Dieser Zustand ist besonders wichtig für Nutzer:innen, die keine Maus verwenden können.

Um den Fokuszustand anzupassen, kannst du die Pseudoklasse :focus zu deinem CSS-Regelsatz hinzufügen.

Weitere Informationen findest du in diesem Artikel: HTML-Durchstreichung: Streichen Sie unnötigen Text mit Style

button:focus {
  outline: 2px solid #000000;
}

Anpassung der Hover- und Fokuszustände

Du kannst die Farben und Effekte der Hover- und Fokuszustände nach deinen Wünschen anpassen. Hier sind einige weitere Eigenschaften, die du verwenden kannst:

  • background-color: Ändert die Hintergrundfarbe der Schaltfläche
  • color: Ändert die Textfarbe der Schaltfläche
  • border-color: Ändert die Farbe des Rahmens der Schaltfläche
  • box-shadow: Fügt der Schaltfläche einen Schatten hinzu
  • text-shadow: Fügt dem Text der Schaltfläche einen Schatten hinzu

Best Practices

Wenn du die Hover- und Fokuszustände deiner Schaltflächen anpasst, beachte die folgenden Best Practices:

  • Verwende Farben, die sich deutlich von der Standardfarbe der Schaltfläche abheben.
  • Vermeide es, zu helle oder zu dunkle Farben zu verwenden, die die Lesbarkeit beeinträchtigen könnten.
  • Achte darauf, dass der Farbkontrast sowohl im Hover- als auch im Fokuszustand ausreichend ist, um die Barrierefreiheit zu gewährleisten.
  • Passe die Hover- und Fokuszustände für alle Schaltflächentypen auf deiner Website an, um Konsistenz zu gewährleisten.

Farbgestaltung für verschiedene Schaltflächentypen

Die Wahl der entsprechenden Farben für Schaltflächen hängt von ihrem Zweck und dem Design deines Projekts ab. Hier sind einige Überlegungen:

Primäre Schaltflächen

  • Verwende auffällige Farben: Primäre Schaltflächen rufen zum Handeln auf. Daher sollten sie in einer Farbe gestaltet werden, die Aufmerksamkeit erregt, wie z. B. Blau, Rot oder Grün.
  • Passe den Farbton an die Aktion an: Beispielsweise ist Grün oft mit Bestätigungen assoziiert, während Rot für Löschen oder Warnungen verwendet werden kann.

Sekundäre Schaltflächen

  • Wähle zurückhaltende Farben: Sekundäre Schaltflächen haben eine geringere Priorität und sollten daher in neutraleren Farben wie Grau oder Weiß gestaltet werden.
  • Verwende Farbe für die Kennzeichnung: Du kannst Farbe verwenden, um sekundäre Schaltflächen zu kennzeichnen, z. B. ein orangefarbenes Symbol für Bearbeiten oder ein blauer Pfeil für Zurück.

Destruktive Schaltflächen

  • Verwende Warnfarben: Destruktive Schaltflächen, die Aktionen ausführen, die nicht rückgängig gemacht werden können, sollten in auffälligen Warnfarben wie Rot oder Gelb gestaltet werden.
  • Denke an die Barrierefreiheit: Stelle sicher, dass die Warnfarbe für alle Benutzer, einschließlich Menschen mit Farbenblindheit, leicht erkennbar ist.

Statusanzeigen

  • Verwende Grün für Erfolg: Grüne Schaltflächen signalisieren erfolgreiche Aktionen oder positive Zustände.
  • Verwende Rot für Fehler: Rote Schaltflächen zeigen Fehler oder Warnungen an.
  • Verwende Gelb für Warnungen: Gelbe Schaltflächen warnen Benutzer vor potenziellen Problemen.

Best Practices

  • Befolge Designrichtlinien: Es gibt von großen Unternehmen wie Google und Apple festgelegte Designrichtlinien für Schaltflächenfarben. Diese Richtlinien können dir helfen, konsistente und effektive Designs zu erstellen.
  • Teste die Barrierefreiheit: Überprüfe deine Schaltflächenfarben mit Barrierefreiheitsprüfern, um sicherzustellen, dass sie für alle Benutzer zugänglich sind.
  • Überlege die emotionale Wirkung: Farben können Emotionen hervorrufen. Wähle die Farben deiner Schaltflächen sorgfältig aus, um die gewünschte Reaktion hervorzurufen.

Best Practices für barrierefreie Schaltflächenfarben

Als Webdesigner ist es wichtig, sicherzustellen, dass deine Webseiten für alle zugänglich sind, auch für Benutzer mit Farbwahrnehmungsstörungen. Hier sind einige bewährte Praktiken für barrierefreie Schaltflächenfarben:

Kontrastverhältnis prüfen

Das Verhältnis zwischen der Farbe des Schaltflächentextes und dem Hintergrund sollte hoch genug sein, damit Benutzer den Text leicht lesen können. Das Web Content Accessibility Guidelines (WCAG) empfiehlt ein Kontrastverhältnis von mindestens 4,5:1 für Text in normaler Größe und 3:1 für größeren Text. Du kannst ein Online-Tool wie den Contrast Checker verwenden, um das Kontrastverhältnis zu überprüfen.

Weiterführende Informationen gibt es bei: Erstellen von interaktiven Tabellen mit einem HTML-Tabellengenerator

Farben für Farbwahrnehmungsstörungen auswählen

Wenn du Farben für deine Schaltflächen auswählst, vermeide es, ausschließlich auf Rot und Grün zu setzen. Diese Farben können für Benutzer mit Rot-Grün-Schwäche schwer zu unterscheiden sein. Wähle stattdessen Farben, die auch für Personen mit dieser Störung gut sichtbar sind, wie z. B. Blau und Gelb.

Textbeschreibungen hinzufügen

Neben der Verwendung von kontrastierenden Farben solltest du auch Textbeschreibungen zu deinen Schaltflächen hinzufügen. Dies hilft Screenreadern, Benutzern den Zweck der Schaltfläche zu erklären. Du kannst die Eigenschaft aria-label verwenden, um eine Textbeschreibung hinzuzufügen.

Hover- und Fokuszustände berücksichtigen

Stelle sicher, dass die Schaltflächenfarben beim Hovern und Fokussieren deutlich sichtbar bleiben. Wähle Farben, die sich deutlich vom Hintergrund unterscheiden, und vermeide es, Effekte wie Schatten oder Transparenz zu verwenden, die die Lesbarkeit beeinträchtigen könnten.

Benutzerfeedback bereitstellen

Benutzer sollten ein klares Feedback erhalten, wenn sie auf eine Schaltfläche klicken oder sie fokussieren. Dies kann durch die Verwendung von visuellen Hinweisen wie einer Farbänderung oder einer Animation erfolgen.

Beispiele für Schaltflächenfarbauswahl in HTML und CSS

Wenn du deine HTML-Schaltflächen anpassen möchtest, stehen dir zahlreiche Farboptionen zur Verfügung. Hier sind einige Beispiele, die dir den Einstieg erleichtern sollen:

Mehr dazu erfährst du in: HTML href-Attribut: Der Link zu externen Ressourcen

Einfache Farbanpassung

Die einfachste Möglichkeit, die Farbe einer Schaltfläche anzupassen, besteht darin, das background-color-Attribut im CSS zu verwenden. Beispielsweise:

<button style="background-color: #007bff;">Blaue Schaltfläche</button>

Dies erzeugt eine blaue Schaltfläche mit dem Hex-Farbcode #007bff.

Verwendung von Farbnamen

Du kannst auch Farbnamen anstelle von Hex-Codes verwenden. Beispielsweise:

<button style="background-color: red;">Rote Schaltfläche</button>

Dies erzeugt eine rote Schaltfläche unter Verwendung des Farbnamens "red".

Farbverläufe verwenden

Um einen Farbverlauf für deine Schaltfläche zu erstellen, kannst du das background-image-Attribut verwenden. Beispielsweise:

<button style="background-image: linear-gradient(to right, #007bff, #0056b3);">Blauer Farbverlauf</button>

Dies erzeugt eine blaue Schaltfläche mit einem Farbverlauf von #007bff nach #0056b3.

Schaltflächen mit Bildern

Wenn du ein Bild anstelle einer Farbe als Hintergrund für deine Schaltfläche verwenden möchtest, kannst du das background-image-Attribut verwenden. Beispielsweise:

<button style="background-image: url('mein-bild.jpg');">Bildschaltfläche</button>

Dies erzeugt eine Schaltfläche mit dem Bild mein-bild.jpg als Hintergrund.

Verwendung von Variablen

Um die Farbwartung zu vereinfachen, kannst du Variablen in CSS verwenden. Beispielsweise:

:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
}

Dadurch wird die Variable --primary-color erstellt, die für die Schaltflächenfarbe verwendet wird. Wenn du die Schaltflächenfarbe später ändern möchtest, musst du nur den Wert von --primary-color aktualisieren.

Verwandte Artikel

Folge uns

Neue Posts

Thumbnail

World of Warcraft auf Linux spielen: Eine guide für Abenteurer

Einführung in World of Warcraft

Thumbnail

Node.js NVM: Antworten auf die häufigsten Fragen

Entwicklung

Professionelle Gmail-HTML-Signaturen: Erstellen, Gestalten und Nutzen

Marketingstrategien

Die vollständige Anleitung zu poczta wp: Alles, was Sie wissen müssen

Sicherheit und Datenschutz

HTML-Content: Der ultimative Leitfaden zur Erstellung ansprechender Webseiten

SEO-Optimierung

Das HTML-Title-Attribut: Ein Leitfaden zur Optimierung von Titeln für SEO und Benutzerfreundlichkeit

Online-Marketing

HTTP-Statuscodes: Ihre Bedeutung und Verwendung im Web

Einführung in HTTP-Statuscodes

Besucherzähler für Websites: Tracking Ihres Website-Traffics für Erfolg

SEO-Optimierung

Beschleunigen Sie die Dateneingabe mit HTML Datalist

Webentwicklung

HTML in PUG konvertieren: Einfach und schnell gemacht

Webentwicklung

Beliebte Posts

SteamCMD: Der umfassende Leitfaden zur Verwaltung von Steam-Servern

Sicherheitsrichtlinien

POST-Anfragen: Erstellen, Senden und Empfangen von Daten im Web

Webentwicklung

LaTeX: Das mächtige Werkzeug für hochwertiges Dokumentenschreiben

Dokumentenerstellung

Wiederherstellung beschädigter Linux-Dateisysteme mit fsck: Ein umfassender Leitfaden

Fehlerbehebung

Die vollständige Anleitung zu poczta wp: Alles, was Sie wissen müssen

Sicherheit und Datenschutz

Gigacube Admin: Zugang zu den erweiterten Einstellungen Ihres Routers

Fehlerbehebung

Linux Mint Themes: Personalisieren Sie Ihren Desktop

Open Source

TCPdump-Beispiele: Paketakquise und Netzwerkdiagnose

Fehlerbehebung

Mounten von ISO-Images unter Linux: Eine Schritt-für-Schritt-Anleitung

Anleitungen

Linux Open File: Anleitung zum Öffnen, Bearbeiten und Löschen von Dateien aus dem Terminal

Open Source