CSS-States für Buttons und Links
Von: Anna, Jonas, Konstantin Buttons und Links können auf Webseiten unterschiedliche Zustände (engl.: states) annehmen. Diese können mit Pseudoklassen in CSS so gestaltet werden, dass Nutzende den genauen Stand ihrer Interaktionen mit diesen Elementen nachvollziehen können.
CSS bietet mit Pseudoklassen die Möglichkeit, Interaktionen mit Buttons und Links visuell erfahrbar zu machen. Die Visualisierung von Interaktionen verbessert das Nutzungserlebnis (engl.: User Experience / UX), weil so eine direkte Reaktion auf Handlungen sichtbar erfolgt. Design-Teams müssen diese Zustände kennen, damit sie bereits in der Gestaltung mitgedacht werden. Andernfalls fällt es ggf. erst auf, dass Zustände fehlen, wenn das Design technisch umgesetzt wird. Für barrierefreie Webprojekte sind einige States ebenfalls Pflicht.
:link – Nicht besuchte Links
Mit der CSS-Pseudoklasse :link kann ein Style für einen noch nicht besuchten Link definiert werden. Dieser Zustand wird von den weiteren Zuständen überschrieben. Im folgenden Beispiel hat der Link eine dunkelgrüne Schriftfarbe und ist unterstrichen.
a:link {
color: darkgreen;
text-decoration: underline;
}:hover – Mouse Over
Der CSS-States Hover wird sowohl für Buttons, als auch für Links genutzt. Wenn man mit dem Mauszeiger über einen mit der Pseudoklasse :hover gestylten Button oder Link fährt, wird durch eine visuelle Veränderung des Zustands angezeigt, dass es sich um ein interaktives Element handelt, das angeklickt werden kann. Der Hover-Zustand wird nicht angezeigt, wenn das Element mit der Tastatur angesteuert wird. Im folgenden Beispiel wechselt die Hintergrundfarbe des Buttons zu einem helleren Blau, wenn der Mauszeiger sich drüber bewegt.
button {
color: white;
background-color: midnightblue;
}
button:hover {
background-color: mediumblue;
}:active – Klick/Tap
Mit der CSS-Pseudoklasse :active kann die Aktivierung des Links oder Buttons, also der Klick- bzw. Tap-Vorgang an sich, visualisiert werden. Im folgenden Beispiel verschwindet die Unterstreichung und der Text wird leicht nach unten versetzt, wenn auf den Link geklickt wird.
a {
color: darkgreen;
text-decoration: underline;
}
a:active {
text-decoration: unset;
position: relative;
top: 2px;
}:visited – Besuchte Links
Mit der CSS-Pseudoklasse :visited kann visualisiert werden, dass ein Link bereits besucht wurde. Sie kann nur auf Links, bzw. Elemente angewendet werden, die ein href Attribut enthalten. Zur Sicherung der Privatsphäre, um das Nachverfolgen des Browser-Verlaufs zu verhindern, sind die Styles dieser Pseudoklasse eingeschränkt. Im Beispiel von Google wird die Schrift des besuchten Links violett dargestellt.
a {
color: #1a0dab;
}
a:visited {
color: #681da8;
}
:focus & :focus-visible – (Per Tastatur) fokussiert
Der CSS-State Fokus wird ausgelöst, wenn ein Element – hier Button oder Link – mit der Tastatur, mit dem Cursor-Zeiger oder über die Touch-Eingabe ausgewählt wird. Browser vergeben die CSS-Pseudoklasse als Grundeinstellung und nutzen als Indikator meist einen blauen oder gepunkteten Rahmen. Diese Indikatoren können verändert werden, sollten allerdings niemals weggenommen werden. Sie sind besonders wichtig für die Barrierefreiheit, bzw. für Menschen, die sich mit Hilfe der Tastatur durch eine Webseite bewegen. Hier findet ihr Tipps wie ein Fokus barrierefrei (um)gestaltet werden kann. Im folgenden Beispiel wird der Fokus-Zustand durch einen zusätzlichen Rahmen um den Button angezeigt.
button {
color: white;
background-color: darkblue;
}
button:focus {
outline: 2px solid darkblue;
outline-offset: 2px;
}Für Elemente, die explizit mit der Tastatur fokussiert wurden, steht zusätzlich die Pseudoklasse :focus-visible zur Verfügung. Über die Besonderheiten von :focus und :focus-visible haben wir bereits einen gesonderten Artikel verfasst.
:enabled & :disabled – Aktiviert/Deaktiviert
Mit der Pseudoklasse :disabled kann ein Button oder Eingabefeld deaktiviert werden, so dass es nicht mehr angeklickt oder fokussiert werden kann. Ein Element dem ein Disabled-Zustand zugewiesen wurde, sollte auch eine :enabled Pseudoklasse erhalten um den gegenteiligen Zustand auszuzeichnen. Im Beispiel wird der deaktivierte Button-Zustand in Grautönen dargestellt, der Hover-Zustand ist nicht vorhanden.
button:enabled {
color: white;
background-color: darkblue;
}
button:disabled {
background-color: darkgrey;
}Aktive Menüpunkte hervorheben
Es ist üblich und erwartungskonform, den Menüpunkt der aktuell aufgerufenen Seite visuell hervorzuheben. Für diesen Zustand gibt es keine Pseudoklasse in CSS. Daher wird dem entsprechenden Link häufig eine normale CSS-Klasse – z. B. .current – zugeteilt und entsprechend gestaltet. Auch das ARIA-Attribut aria-current="page" kann zur Gestaltung über einen CSS-Attributselektor verwendet werden. Beachtet bitte, dass es auch die Pseudoklasse :current gibt, die allerdings einen anderen Zweck erfüllt.
Seltene CSS-States bei Formularen
Einen wichtigen Anwendungsfall für CSS-Pseudoklassen bilden Formulare. Besonders bei der Interaktion mit Formularen ist ein eindeutiges Feedback für Nutzende sehr wichtig. Mit der Pseudoklasse :read-only beispielsweise kann angezeigt werden, dass ein Formularfeld von Nutzenden nicht verändert werden kann. Die Pseudoklasse :invalid informiert darüber, dass eine falsche Eingabe gemacht wurde, wenn zum Beispiel eine Telefonnummer statt der geforderten E-Mail-Adresse in ein Formularfeld eingetragen wurde. Es existieren sehr viele Pseudoklassen, die auf Formulare anwendbar sind. Dieser Artikel (auf Englisch) beschäftigt sich ausführlich mit Webformularen und deren Styling.
Geschrieben von:
Anna Zietek
Konstantin Hanke
