Состояния кнопки: hover, focus, active

Урок 2.7 · Интерфейсы и сайты с нуля · Модуль 2. Как это выглядит: семь простых настроек · По подписке

Цель урока: Сделать кнопку живой: реакция на наведение, фокус с клавиатуры, нажатие и недоступность.

Нужно знать заранее: Урок 2.6

Объяснение

Зачем это нужно: Кнопка — это не только цвет. У неё есть состояния: обычное, наведение мышью, фокус с клавиатуры, нажатие и недоступное. Если состояний нет, человек не понимает, что кнопка живая и что нажатие сработало.

Как это работает: Обычное состояние — как кнопка выглядит всегда. :hover — когда курсор над кнопкой. Обычно чуть темнее или светлее. :focus — когда кнопка выбрана клавиатурой (Tab). Нужен видимый outline, иначе человек не поймёт, где находится. :active — в момент нажатия. Можно чуть уменьшить или сдвинуть. :disabled — недоступное состояние: другой цвет, cursor: not-allowed. transition — плавный переход между состояниями. transition: background 0.2s, transform 0.1s. cursor: pointer — курсор-рука, знак «можно нажать».

Пример с разбором: button { padding: 12px 24px; border: none; border-radius: 12px; background: #4f46e5; color: white; font-size: 18px; cursor: pointer; transition: background 0.2s, transform 0.1s; } button:hover { background: #4338ca; } button:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; } button:active { transform: translateY(1px); } button:disabled { background: #cbd5e1; cursor: not-allowed; } Кнопка реагирует на мышь, клавиатуру и нажатие, а недоступная выглядит иначе.

Уроки модуля 2

• 2.1 Цвет, размер и скругление (бесплатно)
• 2.2 Отступы: снаружи и внутри (по подписке)
• 2.3 Рамка, тень и шрифт (по подписке)
• 2.4 Семь настроек вместе: карточка (по подписке)
• 2.5 Цвет и контраст: чтобы текст читался (по подписке)
• 2.6 Шрифт: размер, насыщенность и интервал (по подписке)
• 2.7 Состояния кнопки: hover, focus, active — вы здесь (по подписке)
• 2.8 Разбор карточки: что поправить в оформлении (по подписке)