I have been seeing this style on some new app icons on iOS and wanted to explore how this would look as a UI element. Does it feel clicky? is this a new button design trend we will start to see?
IMO it really depends on the context. I've seen it applied really well in some instances, but in others it just feels 'tacked on' as another design element which doesn't really suit/fit.
That said, I like how you've done it and it looks great. with regards to the 'clicky-ness' of it, I think the perspective of it "hopping off the page" gives it much of the "this is a button, I can click this" feel as opposed to it potentially getting lost because it didn't stand out enough.
IMO I find these buttons to be heavy and clunky but they definitely do feel clicky, especially when you have all the states designed to really bring them to life.
Not to poke the dead lion with a stick however - Chikezie is right with the shadow, it feels a tad funky. I think it might be because its width is equal to the width of the bottom side of the bottom when in actuality as the shadow extends lower so should the width? I think - I'd have to test it out.
Chikezie doesnt cast a shadow when he walks because he has Tiger Blood - so he has no idea how shadows should be cast because he blots out the sun wherever he goes with his awesomeness.
take "awesome" and move it one pixel up and one pixel to the left. now, convert the inner shadow to a dark blue instead of grey. if "awesome" is a text field: rasterize it, duplicate the layer, add 0.5 blur to new layer, move it below other "awesome" layer, reduce opacity on blurred layer to 40%. #shipit
I think it's 'clicky' and these definitely appear to be the new trend w/ buttons. We get these submitted to Designmoo on a regular basis so they're definitely catching on. I personally don't like em on most of the designs I've seen since it's weird to see a 3D button on a 2D design. It's all about context though and the overall styling of the site. I've seen these used on flat looking designs that didn't use drop shadow on any other elements, and the buttons looked out of place. At the end of the day, these buttons stand out and they're typically uber sexy. I say go for it if it fits with the overall context of your design.
14 Responses
Pro
Marc Hemeon
I have been seeing this style on some new app icons on iOS and wanted to explore how this would look as a UI element. Does it feel clicky? is this a new button design trend we will start to see?
linen iOS texture by Eric E. Anderson http://bit.ly/hUQpvd
about 1 year ago
IMO it really depends on the context. I've seen it applied really well in some instances, but in others it just feels 'tacked on' as another design element which doesn't really suit/fit.
That said, I like how you've done it and it looks great. with regards to the 'clicky-ness' of it, I think the perspective of it "hopping off the page" gives it much of the "this is a button, I can click this" feel as opposed to it potentially getting lost because it didn't stand out enough.
rabble rabble rabble, I just wrote a lot..
about 1 year ago
dig it. it def stands out. the drop shadow is a lil funky. maybe a blowing out the shadow more could help.
about 1 year ago
Pro
Marc Hemeon
a lion just died with your comment @Chikezie
about 1 year ago
[tears] ok I take it back. can I still revive it?
about 1 year ago
Pro
Rui
IMO I find these buttons to be heavy and clunky but they definitely do feel clicky, especially when you have all the states designed to really bring them to life.
Not to poke the dead lion with a stick however - Chikezie is right with the shadow, it feels a tad funky. I think it might be because its width is equal to the width of the bottom side of the bottom when in actuality as the shadow extends lower so should the width? I think - I'd have to test it out.
about 1 year ago
Pro
Marc Hemeon
Chikezie doesnt cast a shadow when he walks because he has Tiger Blood - so he has no idea how shadows should be cast because he blots out the sun wherever he goes with his awesomeness.
about 1 year ago
take "awesome" and move it one pixel up and one pixel to the left. now, convert the inner shadow to a dark blue instead of grey. if "awesome" is a text field: rasterize it, duplicate the layer, add 0.5 blur to new layer, move it below other "awesome" layer, reduce opacity on blurred layer to 40%. #shipit
about 1 year ago
@Marc yes! that's going in my bio
about 1 year ago
Pro
Marc Hemeon
Skon. That is the BEST feedback I have ever heard!!!! You are a Mutha Flippin genius! #WINNINGALLOVERYOURFACE
about 1 year ago
Pro
Rich Hemsley
I think it's 'clicky' and these definitely appear to be the new trend w/ buttons. We get these submitted to Designmoo on a regular basis so they're definitely catching on. I personally don't like em on most of the designs I've seen since it's weird to see a 3D button on a 2D design. It's all about context though and the overall styling of the site. I've seen these used on flat looking designs that didn't use drop shadow on any other elements, and the buttons looked out of place. At the end of the day, these buttons stand out and they're typically uber sexy. I say go for it if it fits with the overall context of your design.
about 1 year ago
Pro
Jeff Finley
Looks great Marc, I want to click it! I think it could be a new trend, because I want to put one on my website just for the hell of it now.
about 1 year ago
Pro
Marc Hemeon
@Jeff do it brother - awesome sauce it up!
about 1 year ago
Pro
Jeffrey Kalmikoff
I love the button, but when you click it I want it to make a squeaking press-and-release sound like a kids toy.
about 1 year ago