This is a collection of 10 best JavaScript and/or CSS libraries that transform the normal checkboxes, radio buttons or even any elements into switch-style toggle buttons for better user experience.
10. Realistic Switch With Pure CSS
A pure CSS solution to style the native checboxes and radio buttons using CSS / CSS3 rules and Font Awesome icons.
9. Pure CSS/CSS3 Smooth Toggle Switch
A tutorial about creating a stylish, smooth, checkbox based switch button with CSS3 transitions.
8. Pure CSS Switches For Checkbox and Radio Inputs
A pure CSS solution that transforms regular checkboxes or radio inputs into toggle switches.
7. Accessible Switch Controls with SCSS
A minimal CSS (SCSS) library used to convert the standard radio buttons into accessible, nice-looking switch controls using CSS3 transitions and 3D transforms.
6. Checkbox Based Toggle Buttons with JavaScript
ToggleableButton.js is a small JavaScript library that converts a regular checkbox input ino a toggleable switch control.
5. Accessible CSS Only Toggle Switches
A pure CSS approach to creating beautiful, accessible toggle switches from checkboxes and radio buttons. Compatible with Bootstrap and Foundation CSS frameworks.
4. iOS Switcher
iOS Switcher uses Bootstrap grid styles and Html/CSS to create smooth, iOS-style switches with gooey effect.
3. iOS Animated Switch Control
A small Javascript widget to convert a checkbox into an iOS 7 styled on/off switch with CSS3 transitions.
2. Material Style Toggle Switches with Pure CSS
Material Design inspired on / off switches which allows the visitor to toggle the state by clicking or tapping. This technique makes use of the CSS pseudo elements, input label tricks and CSS3 transitions / transforms.
1. iOS Style Switches with Pure CSS
A pure CSS solution to create animated iOS 7 style switches with labels using CSS3 box-shadow and transition properties.