Stylish CSS Switch Buttons
These are some stylish CSS only switch buttons, made based on this Adobe Illustrator tutorial, a simplified version of course.
The on/off states are made using a hidden checkbox and an absolutely positioned label above the button with the help of the
~ (sibling) selectors. Therefor it is not working in IE < 9.
Animation is done with CSS3
transform by animating the
top position of the switch handle elements.
Every size is specified in ems, so the button is easily scalable by changing the font-size on the
.switch css class or any parent elements.
- Dark and Light Dropdown Lists
- 360 Degree Product Viewer in HTML5 Canvas
- Shuffled paper
- Sharing menus