Matthias Scharwies: Buttons mit CSS gestalten

Beitrag lesen

problematische Seite

Servus!

Dabei bin ich wieder über

gestolpert.

Was haltet ihr von:

Benutzer können Buttons anklicken und mit der Tastatur ansteuern. Die Browser kennzeichnen dieses [[Standardverhalten]] in ihren [[Browser-Stylesheet]]s, dass, wenn sie mit der Maus angesteuert werden, z.B. im Firefox, Opera und IE11 der Hintergrund blau, wird bei einer Fokussierung erhalten sie im Chrome, Firefox  und Opera eine blaue Umrandung. Bei einigen Browser erhalten auch angeklickte Buttons den Fokus.<ref>MDN: [https://developer.mozilla.org/de/docs/Web/HTML/Element/button#Clicking_and_focus Clicking and focus]</ref> Dieses Verhalten ist notwendig, damit Ihre Webseite für '''alle''' Benutzer ohne Einschränkungen zugänglich (→ [[accessibility]]) ist.


{{Empfehlung|Achten Sie beim Stylen von Buttons darauf, das Standardverhalten von Buttons deutlich zu zeigen:

{{Beispiel|Pseudoklassen hover, active, focus als CSS-Selektoren|
{{BeispielCode|<source lang="css">
  /* Normale Gestaltung */
button {
  ...
}
  /* Gestaltung, wenn Button mit Maus oder Tastatur ausgewählt ist */
button:hover,
button:focus {
  ...
}
  /* Gestaltung, wenn Button gedrückt ist */
button:active {
  ...
}
</source>}}
{{BeispielText|Legen Sie klar erkennbare Formatierungen für Buttons fest, die dann über die Pseudoklassen [[CSS/Selektoren/Pseudoklasse/hover, active, focus|hover, active, focus]] selektiert werden. }}}}

}}

Herzliche Grüße

Matthias Scharwies

--
Es gibt viel zu tun: ToDo-Liste