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

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

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

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

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

.paper-btn label { ... }

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

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

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

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

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

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

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