• Теория
  • Теория

Бумажные кнопки, шаг 3

Отлично! Теперь добавим к активному состоянию кнопок более контрастную тень и изменим цвет текста. Для этого создадим CSS-правило с таким селектором:

.paper-btn input:checked ~ label { ... }

Тень box-shadow, которая появляется в активном состоянии, анимируем с помощью плавного перехода. Свойства перехода нужно добавить в общее CSS-правило для подписи:

.paper-btn label { ... }

Так тень будет и появляться, и исчезать плавно.

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. Цена 22 900 ₽

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Плавные переходы» тренажёра «Интерфейсные анимации» можно после регистрации и оформления подписки.