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