Специально для вас прошерстили Codepen и собрали 10 готовых решений для создания кнопок, чекбоксов и радиобаттонов — просто вставьте на свой сайт!
Pure CSS toggle buttons
Минималистичные кнопки в дизайне iOS. Только HTML и CSS, никакого JavaScript!
Neumorphic Elements
Если вы хотите быть в тренде, ваш выбор — неоморфизм! Автор этого сниппета действительно постарался: кнопки, поля ввода, анимация элементов получились просто завораживающими. Подбор цветовой схемы тоже заслуживает внимания.
Checkbox group styled as tiles
Стилизованные под под плитку с иконками чекбоксы. Вышло весьма стильно, минималистично и современно. Однозначно лайк!
Jelly Radio Button
Радиобаттоны с приятным и ненавязчивым эффектом. Ванильный CSS и никаких фокусов!
Input & Radio-button
Сниппет с полем ввода и тремя радиобаттонами. Чем-то похож на предыдущий: милая анимация совершенно не отвлекает от элементов.
Pure CSS Radio Button Tiles
Еще один элемент в виде плитки — только теперь не чекбокс, а радиобаттон. Без JS. Как заявляет автор, работает во всех браузерах и на мобильных устройствах.
Radio Button Input Scale
Радиобаттон в виде шкалы. Подойдет для реализации каких-нибудь тестов и опросов.
jQuery | Custom Radio Buttons Survey
Еще один сниппет для опросов. В этот раз — на jQuery. Подойдет в качестве инструмента получения фидбека посетителей сайта или клиентов.
Bump — Agressive Toggle
«Злой» переключатель на чистом HTML и CSS. А вдруг пригодится!
Task Progress Meter
Не совсем чекбокс, но тоже полезная штука — трекер прогресса на базе чекбоксов. Если вы давно хотели соорудить собственное productivity-приложение, сниппет будет вам полезен.
Вдохновились? Используйте сниппеты из подборки или создавайте свои! Чтобы регулярно коллекции готовых элементов веб-дизайна — ставьте лайк и подписывайтесь на ISPmanager в Яндекс Дзен!