Huzzah! We've released a brand new WordPress theme called Statesman. Check it out!

On/Off Switches and Toggles (PSD)

Download

Downloaded 21,326 times

Switches and toggles, everyone’s at it, it’s toggle crazy out there! Today’s freebie is a set of on/off switches which you can plonk straight into your next design.

They’re popular for good reason, a neatly placed switch can make all the difference to the UI of an app or site and is a nice alternative to a checkbox. Do remember though, use them sparingly and only where it makes sense to do so – not just for the sake of it.

15 Comments

  1. first switches in this set are the best one ;)

  2. Thanks! Good Stuff!

  3. Really cool goodies Orman. Thanks for these :)

  4. Heber Crespo

    Way much good-lookin’ that those metalized ones…

  5. Thanks ! good job:)

  6. Daniel Chatfield

    You should use these in the admin panels for your themes.

    • Yeah could do, it’s an option. I do prefer to keep things simple and in keepin with the WordPress UI most of the time.

  7. Daniel Chatfield

    I prefer the circular handles to be ‘inside’ the toggle like: http://ahb.me/2swj

    But for some reason I think the rounded one looks right on top.

  8. They look really great. I think I like the toggle on the inside too, but it’s such an easy customization with the PSD. Thanks for sharing!

    • That’s right, I did try inside but thought outside had the edge. Simple change with the PSD as you’ve mentioned.

  9. Yet another CSSification, this one got a bit tricky since I wanted to use a checkbox for the markup. There is no Javascript and quite limited markup, so rather ‘pure’ CSS.
    http://madpandaproductions.com/attic/html5/one-element-button/pp-switch.html

    And once again I should find something better to do :P
    Though thanks for supplying me with great PSDs to practice CSS with, Orman :)

  10. There is clearly an usability issue with toggle in general. It’s good looking ok, but we should avoid them imho. The reason is it: is the toggle set to off when you see the word OFF or is the toggle set to off when the button is above OFF (and so you don’t see OFF) ? As web professional users, we know the answer, but the average user may have some trouble with that.

    • Yep, all good and valid points. But then again, the iPhone uses toggles within the menus and that’s a pretty popular device…

  11. Toggles icon very nice but my thought is inside text yes and No the text is other language translation problem how to fix this issue EX: japanesh, chinesh language

  12. Riccardo Mel

    Very impressive, thanks! <3 It!

Leave a Comment