Rebound: On / Off Toggle
David Brookskeyboard shortcuts: ← previous shot → next shot L or F like
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers.
44,329,756,015 pixels dribbbled
Copyright © 2009-2012 Dribbble LLC. All screenshots © their respective owners.
Handcrafted in Salem, Massachusetts. Hosted by (mt) Media Temple.
12 Responses
Here's the on/off toggle I posted earlier, in actual working code. It's a class on a <label> that wraps around a visibility:hidden checkbox. JavaScript looks to see if the checkbox is checked or unchecked, and adjusts the background position accordingly.
You might wonder: Why not just use a checkbox? We wanted this UI to imply immediate effect, rather than the user wonder if they needed to go click a submit button somewhere.
about 2 years ago
Pro
Rogie
Really good logic behind it's use Nathan. Awesome.
about 2 years ago
Clever!
about 2 years ago
Pro
Jesse Gardner
I love how the text color reflects on the switch. Nice attention to detail. So freaking slick!
about 2 years ago
I'm diggin' it
about 2 years ago
Pro
Chandler Van De Water
Awww, man, you didn't add any green glow to the inside of the button....
Logic makes a lot of sense, though. Brainstapaper-ed.
about 2 years ago
I definitely appreciate the logic behind why you used this control.
That said, I've never been a big fan of these. I never know where to click. When it's in the 'off' state, you have to click the word 'off' to turn it on? Always seemed backwards to me. I usually attempt to click and drag the button to the other side, as it looks more like as slider.
about 2 years ago
@Chandler - I tried it with a little more glow, but it looked a bit eerie. I think the slider has *just* enough, calling a bit more attention to it. Whereas, adding glow to the inset just made the whole thing look kinda Alienware-ish. :)
about 2 years ago
@Nathan — can we get a live demo? I want to click to play around with it...
about 2 years ago
@Darren - Sorry, but it's for a subscription based web app. :(
about 2 years ago
When are you going to make us a sweet tutorial on this Nathan? :P
about 2 years ago
Rebound
Feature Configuration
by David Brooks
This interface will allow our users to turn specific features in our application on or off. Reusing Nathan's switch interaction was a no-brainer.
When the user clicks a feature, the switch appears in the ribbon and the configuration appears to the right.
over 1 year ago