Отключённые кнопки

Мы добавили карточку Луны рядом с карточкой Тигра. Луна забронирована: к ней приедет семья познакомиться, поэтому её кнопка пока называется «Забронирована» и ничего не должна делать. Это копия кнопки Тигра со всеми классами из этого урока. (Если карточка Луны оказалась под карточкой Тигра, окно предпросмотра слишком узкое для двух карточек рядом. Это не страшно.)

В HTML кнопку отключают атрибутом disabled. У него нет значения: его просто записывают в открывающем теге, как атрибут required из курса HTML. Отключённую кнопку нельзя нажать, а клавиша Tab её пропускает.

<button disabled>Забронирована</button>

Браузеры показывают отключённые кнопки серыми, но Preflight и наши классы это переопределяют, поэтому кнопка Луны всё равно выглядела бы точно так же, как кнопка Тигра. Посетители пытались бы нажать на неё и недоумевали бы, почему ничего не происходит. Для этого и нужен вариант disabled:: он применяет класс только к элементу с атрибутом disabled (в CSS это псевдокласс :disabled). Часто используют такие два класса:

• disabled:opacity-50 — кнопка наполовину прозрачна, поэтому выглядит блёклой,
• disabled:cursor-not-allowed — над кнопкой указатель мыши превращается в перечёркнутый круг.

Но есть ещё одна загвоздка: hover: и active: не интересует, отключена кнопка или нет, поэтому кнопка Луны всё равно темнела бы, когда на неё наводят указатель или нажимают. Решение — объединить два варианта: enabled:hover:bg-orange-600 действует, только когда кнопка включена (не отключена; в CSS это :enabled) и над ней находится указатель мыши. Так можно соединять варианты всякий раз, когда класс должен действовать лишь при выполнении сразу нескольких условий.