- Теория
- Теория
Бумажные кнопки, шаг 3
Отлично! Теперь добавим к активному состоянию кнопок более контрастную тень и изменим цвет текста. Для этого создадим CSS-правило с таким селектором:
.paper-btn input:checked ~ label { ... }
Тень box-shadow
, которая появляется в активном состоянии,
анимируем с помощью плавного перехода.
Свойства перехода нужно добавить в общее CSS-правило для подписи:
.paper-btn label { ... }
Так тень будет и появляться, и исчезать плавно.
Минимальный вид табов
- index.html
HTML
HTML
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
100%