- Теория
- Теория
Бумажные кнопки, шаг 2
Итак, у нас есть заготовки кнопок. Давайте оживим их.
Переключаться кнопки будут при помощи трюка с селекторами ~
и :checked
, который описан в задании части «Селекторы. Тонкости».
Сначала зададим цвет фона для активного состояния кнопок. Кнопка «Правда» будет менять цвет на зелёный, а кнопка «Ложь» — на красный. Для этого нам нужно будет воспользоваться такими селекторами:
.paper-btn-true input:checked ~ label { ... } // правда
.paper-btn-false input:checked ~ label { ... } // ложь
Минимальный вид табов
- index.html
HTML
HTML
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
100%