Ausgestaltung von Buttons und Links

Ein Button sieht nicht immer gleich aus – je nachdem, was gerade mit ihm passiert, befindet er sich in einem anderen State (Zustand). CSS stellt dafür Pseudo-Klassen bereit, mit denen sich jeder State gezielt gestalten lässt.

Alle States für Buttons gestalten

Basis-Stil festlegen: Definiere zuerst das Aussehen des Buttons im Ruhezustand. Alle State-Stile bauen darauf auf.
```
button {
  background-color: black;
  color: white;
  padding: 0.75rem 1.5rem;
  border: 2px solid black;
  cursor: pointer;
}
```
CSS
:hover – Mauszeiger über dem Button: Dieser State greift, sobald jemand mit der Maus über den Button fährt, ohne zu klicken. Zeige eine sichtbare Reaktion, zum Beispiel durch Farbwechsel.
```
button:hover {
  background-color: white;
  color: black;
}
```
CSS
:focus-visible – Tastaturfokus: Wenn jemand den Button per Tastatur (Tab-Taste) ansteuert, erhält er den Fokus. Nutze :focus-visible statt :focus, damit der Fokusring nur bei Tastaturnavigation erscheint und nicht beim Klicken mit der Maus.
```
button:focus-visible {
  outline: 3px solid blue;
  outline-offset: 3px;
}
```
CSS
:active – Button wird gedrückt: Dieser State ist aktiv, solange die Maustaste oder der Touchscreen gedrückt gehalten wird. Er gibt unmittelbares visuelles Feedback auf den Klick.
```
button:active {
  background-color: darkgray;
  color: white;
  transform: scale(0.97);
}
```
CSS
:disabled – Button ist deaktiviert: Ein deaktivierter Button kann nicht angeklickt werden. Kommuniziere das deutlich durch reduzierte Opacity und einen angepassten Cursor.
```
button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
```
CSS

Im HTML wird der Button mit dem Attribut disabled deaktiviert:
```
<button type="button" disabled>Nicht verfügbar</button>
```
HTML

Alle States zusammen: So sieht ein vollständiges Beispiel mit allen States aus.

button {
  background-color: black;
  color: white;
  padding: 0.75rem 1.5rem;
  border: 2px solid black;
  cursor: pointer;
}

button:hover {
  background-color: white;
  color: black;
}

button:focus-visible {
  outline: 3px solid blue;
  outline-offset: 3px;
}

button:active {
  background-color: darkgray;
  color: white;
  transform: scale(0.97);
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

CSS

Eigene Stile gestalten: Jetzt bist du dran. Hier ist ein Beispiel-Button mit allen States – fahre mit der Maus darüber, klicke ihn an oder navigiere per Tab-Taste:

Links sind wie Buttons – auch sie haben verschiedene States. Neben :hover und :focus-visible kommt bei Links auch der :visited-State hinzu, um besuchte Links optisch zu kennzeichnen.

Inline-Links gestalten

Basis-Stil festlegen: Definiere zuerst das Aussehen des Links im Normalzustand. Typischerweise mit Farbe und Unterstrich.
```
a {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s;
}
```
CSS
:hover – Mauszeiger über dem Link: Zeige eine klare visuelle Reaktion, zum Beispiel durch Farbwechsel oder Stiländerung.
```
a:hover {
  color: darkblue;
  text-decoration: underline wavy;
}
```
CSS
:focus-visible – Tastaturfokus: Links können auch per Tastatur angesteuert werden. Ein deutliches Fokusring ist wichtig für die Barrierefreiheit.
```
a:focus-visible {
  outline: 3px solid blue;
  outline-offset: 3px;
}
```
CSS
:visited – Besuchter Link: Links, die der Nutzer bereits besucht hat, können anders dargestellt werden. Aus Datenschutzgründen sind jedoch nur wenige CSS-Eigenschaften erlaubt (hauptsächlich color und background-color).
```
a:visited {
  color: purple;
}
```
CSS
:active – Link wird gerade angeklickt: Dieser State zeigt, dass der Link gerade aktiviert wird.
```
a:active {
  color: red;
}
```
CSS

Alle States zusammen: Ein vollständiges Beispiel mit allen Link-States.

a {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s;
}

a:hover {
  color: darkblue;
  text-decoration: underline wavy;
}

a:focus-visible {
  outline: 3px solid blue;
  outline-offset: 3px;
}

a:visited {
  color: purple;
}

a:active {
  color: red;
}

CSS

Eigene Stile gestalten: Hier ist ein Beispiel-Link mit allen States – fahre mit der Maus darüber, klicke ihn an oder navigiere per Tab-Taste:

Dies ist ein Beispiel-Link