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 :checked and ~ (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.