Как создать красивые анимированные radio и checkbox кнопки

1
2258

При помощи CSS3 мы можем легко создать красивые radio и checkbox кнопки с анимацией при нажатии. В данном примере будет создан следующий вариант кнопок:

Радио и чекбокс флажки часто используются на сайтах в формах, особенно там, где необходимо взаимодействие системы с пользователем, будь то регистрация, вход или оформление покупки товара. Чтобы разнообразить их внешний вид мы создадим немного нестандартный вариант.

Для того, чтобы создать красивые анимированные radio и checkbox кнопки мы воспользуемся стандартными возможностями CSS и HTML. Первым делом разметим нашу HTML страницу. Добавим на неё 3 radio кнопки и 3 checkbox флажка:

Для достижения эффекта анимации мы воспользуемся CSS transition, который будет срабатывать как только radio или checkbox будет переходить в состояние :checked. Таким образом, мы сможем определить была ли нажата кнопка или нет и в зависимости от состояния изменять какое-либо стилевое свойство элемента. В данном примере мы будем изменять свойство background.

Для всех нажатых элементов срабатывают следующие CSS свойства:

Плавная анимация заливки фона происходит за счет использования transition на элемент <label>, который мы разметили выше:

Для того, чтобы убрать стандартное отображение кнопок была установлена нулевая прозрачность у этих элементов, а вместо их использовались стилизованные <label>.

Итоговый СSS код:

 

Красивые чекбоксы и радиокнопки готовы к использованию:

Простые анимированные radio и checbox кнопки

Спасибо за внимание!

1 КОММЕНТАРИЙ

ОСТАВЬТЕ ОТВЕТ

Пожалуйста оставьте комментарий!
Введите ваше имя