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:

10
X
×

Coding Preferences


HTML

CSS

Javascript

More

9 Comments

× New

Sign In to comment

Kushagra Agarwal:

Well, there are some switches in the real world that look and work like this one. Have a look at this. You're welcome.

Istvan Halmen:

I'm not an UX expert, but I don't agree with you completely
Why isn't it mobile friendly? It's easy to use it on a touchscreen
It's not colourblind friendly, that's right. A high contrast version of it could help.
Regarding the screen readers: it has a checkbox and a label which represents the state of the switch, so if the input field/label has proper naming, I don't see the problem.

Rishabh :

This is really amazing. I mean really, this is super awesome work. Keep it up buddy!

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript
    CSSDeck G+