Giveaway! Win Adobe Photoshop free for 1 year. Enter here for your change to win!
Downloaded 30,958 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.
All resources are offered free of charge with very little restriction. Want to show your support or some appreciation? Please check out my latest project Dunked. A simple tool for building an online portfolio.
Premium Pixels is a collection of free design resources created and curated by UK based Web Designer Orman Clark.
Hopefully you'll learn something new but hey, just saving yourself some time is awesome enough, right?
Read More...
10108432
Downloads and counting!
first switches in this set are the best one ;)
Thanks! Good Stuff!
Really cool goodies Orman. Thanks for these :)
Way much good-lookin’ that those metalized ones…
Thanks ! good job:)
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.
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.
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.
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 :)
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…
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
Very impressive, thanks! <3 It!