Deaktivierte Buttons

Wir haben Lunas Karte neben Tigers hinzugefügt. Luna ist reserviert: Eine Familie kommt, um sie kennenzulernen, ihr Button zeigt deshalb vorerst „Reserviert“ und soll nichts tun. Er ist eine Kopie von Tigers Button mit allen Klassen aus dieser Lektion. (Wenn Lunas Karte unter Tigers steht, ist deine Vorschau zu schmal für beide Karten nebeneinander. Das macht nichts.)

In HTML schaltest du einen Button mit dem Attribut disabled aus. Es hat keinen Wert: Du schreibst es einfach in das öffnende Tag, wie das Attribut required aus dem HTML-Kurs. Ein deaktivierter Button lässt sich nicht anklicken, und die Taste Tab überspringt ihn.

<button disabled>Reserviert</button>

Browser zeigen deaktivierte Buttons in Grau, aber Preflight und unsere Klassen überschreiben das, Lunas Button sähe also immer noch genauso aus wie Tigers. Besucher würden versuchen, ihn anzuklicken, und sich wundern, warum nichts passiert. Dafür gibt es die Variante disabled:: Sie wendet eine Klasse nur auf ein Element mit dem Attribut disabled an (in CSS die Pseudoklasse :disabled). Diese beiden Klassen sind üblich:

• disabled:opacity-50: der Button ist halb durchsichtig und wirkt verblasst,
• disabled:cursor-not-allowed: über dem Button wird der Mauszeiger zu einem durchgestrichenen Kreis.

Einen Haken gibt es noch: hover: und active: kümmert es nicht, ob der Button deaktiviert ist, Lunas Button würde also trotzdem dunkler, wenn du darauf zeigst oder ihn drückst. Die Lösung ist, zwei Varianten zu kombinieren: enabled:hover:bg-orange-600 gilt nur, wenn der Button aktiviert ist (nicht deaktiviert; in CSS :enabled) und der Mauszeiger darüber steht. Varianten kannst du auf diese Weise verketten, wann immer eine Klasse nur gelten soll, wenn mehrere Bedingungen gleichzeitig erfüllt sind.