Ajax Loader
×

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.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Stylish CSS Switch Buttons

    CSSDeck G+