Here we’ve gathered some of beautiful HTML/CSS switch, radio and checkboxes snippets that you can use for your next project. This list is also great for web designer to learn new code snippets and web design inspiration.
See Also: 15 CSS Calendar Snippet
Simple And Minimalistic CSS Switch Button
A basic but not less visual attractive checkbox with minimalistic, white and bordered checkboxes.
Smooth UI Radio-Checkboxes KIT
CSS UI Elements with Red and Blue Gradients
This code experiment is a set of elements with an interesting style: one range slider (or just a slider) and two switches.
Animated SVG Checkboxes & Radio Buttons jQuery Plugin
A great tutorial that shows how to take advantage of svg paths animated with javascript to create good looking checkboxes and radio buttons.
Squishy Toggle Buttons
Nicely squishy rubber buttons, inspired by designs on dribbble.
Pure CSS Checkboxes & Radio Buttons
Pretty checkbox is a pure css library to create beautiful radio buttons and checkboxes with a variety of effects and transitions.
CSS Task Checklist
Neat css tasklist by codepen user shaw adapted from original js code by dribbble user gal shir. It features neat animations for three checkboxes included in the snippet.
CSS Yes/No Button Switch
Sinograph Panel: CSS UI Concept
A beautiful user interface concept including amazing buttons with well-designed states. It is also possible to add text boxes into the mix. The active state of the buttons is very attractive, featuring a neon-like effect.
Simple Animated Switch
Fancy switch created by dmitri voronianski.
jquery checkbox style
CSS3 Checkbox Styles
Amazing Stylish CSS Switch Buttons
These are some stylish css only switch buttons, made based on this adobe illustrator tutorial, a simplified version.
Fancy Checkbox Toggles
A pair of checkboxes toggles, flat design, round corners and using soft colors.
Input Range styled
Flat Recommend Button
A classic flat button made with css and js using the family font, open sans, and sans-serif as the second option. The button has round corners.
Pure CSS Light Switch
Checkbox Toggle Animation CSS
This is a neat and fluid toggle animation on a checkbox controlled by javascript styled in css with the use of html to use several svg lines.
Android Holo Style Checkboxes
Checkboxes created to look and behave like androids new holo ui.
Flat Toggles With Animation
Collection of some fresh, flat toggles. All utilize the checkbox hack.
CSS Only iOS Style Checkbox Tick
An ios style tick checkbox like those seen in the mail app when you edit the list.
Pure CSS3 Toggle Button White Theme
Pure CSS Animated Checkbox
Realistic switch with red and blue background.
CSS Checkbox Styles
Nifty css3 checkbox styles created by codepen user brad bodine, functional and stylish, with a short and lightweight code for easy implementation.
Acid Checkbox Style
Brad bodine has designed a set of checkboxes with a metallic green-grey style that reminds us a nuclear power plant.
Flat Yes-No Switch
Clean switches, round corners, that change in size and color as they are selected.
Blue Checkbox Button
Beautiful round buttons showcasing a checkbox with a depth effect, every time that they are selected.
CSS Checkboxes with visual affordance Indicators
A set of clean css checkboxes covering: unchecked, checked, disabled and enabled states.
Dark Checkboxes and Radio Buttons in CSS
A set of checkboxes and radio buttons with a dark background and blue elements. The checkboxes and radio buttons have a minimal style complemented with beautiful glowing marks and subtle shadows.
Simple Checkbox Button
A set of round buttons showcasing a checkbox with a depth effect.
Checklist with Progress Bar CSS/HTML Template
A checklist web element with a progress bar created using pure css.
Colorful Toggle Switches
A set of fully functional toggle switches in multiple colors.
Styled Form Fields
Minimalist styled form elements like checkbox, radio, select, dropdown.
Pure CSS3 Metal Checkbox
Better Check Boxes with jQuery and CSS
CSS Elevator Board
A board with a design out of the box.
Checkbox light
Pure CSS Checkbox Animation
A gorgeous animation made in pure css for animating checkboxes.
Fancy Sheckbox Selector
Checkbox concept put together by denys mishunov.
Pure CSS Menu Transitions
A set of 4 menu transitions created solely using css to do a menu hamburger transition using checkbox properties.
Toggle Switch With checkbox:checked
Round switch button in css with animation cleaned up.
