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

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

Итак, у нас есть заготовки кнопок. Давайте оживим их.

Переключаться кнопки будут при помощи трюка с селекторами ~ и :checked, который описан в задании части «Селекторы. Тонкости».

Сначала зададим цвет фона для активного состояния кнопок. Кнопка «Правда» будет менять цвет на зелёный, а кнопка «Ложь» — на красный. Для этого нам нужно будет воспользоваться такими селекторами:

.paper-btn-true input:checked ~ label { ... } // правда
.paper-btn-false input:checked ~ label { ... }  // ложь

Хотите начать карьеру веб-разработчика? Записывайтесь на профессию «Фронтенд-разработчик», которая стартует 15 апреля 2024. Всего от 4410 ₽в месяц.

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

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

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

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

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

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