btw have you tried giving the buttons more of a trapeze shape (the upper left corner being nudged a couple of px's to the right and the upper right corner being nudged a couple of px's to the left) ?
Great work, as always :) One suggestion that may help is angling the knob for the slider up a little more. All the other elements have a nice tilted perspective but the slider appears to face the viewer dead-on.
While I love pretty much all of this, I'm not completely sold on that yellow background on the focused text input... I think it would work better with the background white, but a glow around the border. Anyways, you rock, dude!
Nice collection! Somehow the white buttons with that edge work out better than the orange ones (imho). The dropdown is the star of this dribbble indeed!
Rogie, I like your buttons so much I spent the last hour replicating them in Photoshop with multiple other color variations!... but then I realized I have a lot of work in queue... :) #back2css
The roundness and depth is superb. Wanna eat it up! Hmm.. only suggestion I could give is maybe have a more visible separation between selected and unselected. Those two mix a little funky.
On the "Non Selected/Selected" double button, wouldn't the top edge of the raised button be higher than top edge of selected button? The same would be true for the selected state of the normal buttons... the effect would be similar to how the buttons on Sagemeisters site work: http://www.sagmeister.com/index.html
I liked yours so much I thought I would offer my take on non-standard
"pretty" form elements. I feel like these are tough to design because if you have too much of the 3D effect it makes the button text feel off, like it needs to be angled back more and squished down a bit to give it some perspective.
This was my attempt at making the buttons "look right" but still have that 3D look.
All of your awesome comments are...well...awesome. Chris, great take on those buttons! I know you aint a fan of the drop down but the quirkyness about it is what I love!
As for all other comments like Ryan's comment about Greedo (SWFTW) and Zsolt's licking comment, rock!
People of Dribbble, including teh cederholm please note: I appreciate good constructive criticism, but sappy nerdy comments about licking or sticking buttons into your handbag, calling design work "sick" or "sexxy" and also using retro trendy statements like "da bomb" absolutely makes me smile. Please continue such comments.
Looks great Rogie, But I'm not sure I like the selected state for the first 3D Push Me button. since the the normal version indicates that the bottom is raised, it is only natural that the selected state be an inverse of that. What comes to mind is an inset bottom with a shadow on the top. Right now the selected state looks like its just a darker version of the normal one.
I hope I made that understandable. Just an opinion, but awesome work otherwise. Looks like it would be a blast to code.
After a bit of flipping back and forth between your version and Chris's version of these things, I like his composition better, they feel more well balanced. But I think yours is much bolder, with more contrast and clarity.
All in all, I think you've managed to take something that everyone seems to do one way and give us all a fresh take that's really usable. I can see these getting ripped off pretty quickly (as evidenced in the comments!)
Jesse, you are spot on. Now that I'm looking at them, there are lots of little things that aren't just perfect. Also, I'm thinking about going with a button that is not raised as high.
Max, nice work and way to stay dedicated to the cause! I've got a few people doing CSS on Forrst as well, so this should be really cool to compare two different takes on this. Awesome stuff!
Mat, awesome stuff! The one thing that bothers me is the use of a surrounding div. I'll have to come up with a solution that doesn't use any extra markup.
4,204,629,505 pixels dribbbled
We specialize in highly-scalable, fully managed web hosting solutions so you don't have to!
81 responses
Various form elements for a web application of mass madness. My personal favorite is the select drop down. I lub it.
about 1 month ago
These look really good. I love the way you did the bevels, very unique.
about 1 month ago
Thanks Jad. I rather love them too. Glad you do!
about 1 month ago
That's awesome Rogie! One small detail though: the Yoda selection line feels a bit blurry at the bottom. Try maybe something like this :)
about 1 month ago
Insanely sexy! A little too much bevel IMO maybe, but definitely sexy. Awesome work as always
about 1 month ago
Cool! You could probably play a little bit with the text perspective as well, but I like it :)
about 1 month ago
cool idea on the 3d buttons! The blue hover on the dropdown item goes really well with the orange.
about 1 month ago
@Benjamin De Cock Doh! I had something very similar to that, but just a tad lighter. In the copy, I somehow lost it :(
about 1 month ago
@Alberto, dang didn't even think of that! Will experiment in code when the time comes :)
about 1 month ago
ohh! love those dropdowns!
about 1 month ago
btw have you tried giving the buttons more of a trapeze shape (the upper left corner being nudged a couple of px's to the right and the upper right corner being nudged a couple of px's to the left) ?
about 1 month ago
Looks Great - Love it Rogie :)
about 1 month ago
Wow, these are looking so awesome Rogie! Can't wait to see these babies coded up.
about 1 month ago
Really cool! Just don't use that button style for any "delete" actions, because they just make you want to click them straight away!
about 1 month ago
Like how the white rollover menue is linked to the white/orange arrow! Fusion:)
about 1 month ago
Dummy Star Wars copy = Instant Win.
about 1 month ago
Great work, as always :) One suggestion that may help is angling the knob for the slider up a little more. All the other elements have a nice tilted perspective but the slider appears to face the viewer dead-on.
about 1 month ago
While I love pretty much all of this, I'm not completely sold on that yellow background on the focused text input... I think it would work better with the background white, but a glow around the border. Anyways, you rock, dude!
about 1 month ago
Nice collection! Somehow the white buttons with that edge work out better than the orange ones (imho). The dropdown is the star of this dribbble indeed!
about 1 month ago
Brilliance has just took over my screen! I just want to pickup those buttons and put them in my pocket so they are with me always! So nice man :)
about 1 month ago
The select drop-down seems extremely odd to me. Not sure it has much real-world practicality to it.
about 1 month ago
Rogie, I like your buttons so much I spent the last hour replicating them in Photoshop with multiple other color variations!... but then I realized I have a lot of work in queue... :) #back2css
about 1 month ago
wow, those buttons are teh h0t. I really really want to press them.
about 1 month ago
Kyle, I love how you said teh hot. LOL and thanks.
about 1 month ago
Love the "raised" quality to them. Furious elements, even.
about 1 month ago
Artistically, I love these. Functionally in a web app... have to see them in context. But as always beautifully executed man!
about 1 month ago
Reminds me of http://bjango.com/
about 1 month ago
I love 1px bevel details
about 1 month ago
Rebound
Re: Mad Elements
July 08, 2010
These look awesome Rogie!
I was picturing a way to keep the raised 3D look for that select element - this is the best kludge I could make. Kudos!
about 1 month ago
The roundness and depth is superb. Wanna eat it up! Hmm.. only suggestion I could give is maybe have a more visible separation between selected and unselected. Those two mix a little funky.
about 1 month ago
Awesome man!
about 1 month ago
Dang son
about 1 month ago
On the "Non Selected/Selected" double button, wouldn't the top edge of the raised button be higher than top edge of selected button? The same would be true for the selected state of the normal buttons... the effect would be similar to how the buttons on Sagemeisters site work: http://www.sagmeister.com/index.html
about 1 month ago
Greedo! This stuff looks edible.
about 1 month ago
I want to lick it.
about 1 month ago
That is really beautiful! ;)
about 1 month ago
The select drop down is awesome. What font are you using for these examples?
about 1 month ago
Rebound
Form Elements
July 08, 2010
I liked yours so much I thought I would offer my take on non-standard
"pretty" form elements. I feel like these are tough to design because if you have too much of the 3D effect it makes the button text feel off, like it needs to be angled back more and squished down a bit to give it some perspective.
This was my attempt at making the buttons "look right" but still have that 3D look.
about 1 month ago
Nice design dude, but these seem like they will be pretty tough to implement ;)
about 1 month ago
Pushy buttons are da bomb
about 1 month ago
Good Lord, this is sick!
about 1 month ago
All of your awesome comments are...well...awesome. Chris, great take on those buttons! I know you aint a fan of the drop down but the quirkyness about it is what I love!
As for all other comments like Ryan's comment about Greedo (SWFTW) and Zsolt's licking comment, rock!
about 1 month ago
People of Dribbble, including teh cederholm please note: I appreciate good constructive criticism, but sappy nerdy comments about licking or sticking buttons into your handbag, calling design work "sick" or "sexxy" and also using retro trendy statements like "da bomb" absolutely makes me smile. Please continue such comments.
about 1 month ago
Looks great Rogie, But I'm not sure I like the selected state for the first 3D Push Me button. since the the normal version indicates that the bottom is raised, it is only natural that the selected state be an inverse of that. What comes to mind is an inset bottom with a shadow on the top. Right now the selected state looks like its just a darker version of the normal one.
I hope I made that understandable. Just an opinion, but awesome work otherwise. Looks like it would be a blast to code.
about 1 month ago
I LOVE the 3D bevel!
about 1 month ago
@Anthony, the second state is the hover state. Yeah, its just a bit darker. The third state is press. The fourth is selected.
@Collin Thanks dude!
about 1 month ago
Ohhh. I get it now. I thought the second row of buttons was a different style. It all makes sense now.
about 1 month ago
Yeah dude, just no labels — I tried to cram most of the elements in ;)
about 1 month ago
Holy cow, that's sexy!
about 1 month ago
After a bit of flipping back and forth between your version and Chris's version of these things, I like his composition better, they feel more well balanced. But I think yours is much bolder, with more contrast and clarity.
All in all, I think you've managed to take something that everyone seems to do one way and give us all a fresh take that's really usable. I can see these getting ripped off pretty quickly (as evidenced in the comments!)
about 1 month ago
You are really being a trendsetter here... :D
about 1 month ago
Mi mi mi that is sexy, can't wait to see them implemented.
about 1 month ago
It seems like the “Selected/Not Selected” would be the perfect place for a rocker switch.
about 1 month ago
Oh, one more thing. The selected state of your "selected/not selected" switch shouldn't throw any shadow, right?
about 1 month ago
Jesse, you are spot on. Now that I'm looking at them, there are lots of little things that aren't just perfect. Also, I'm thinking about going with a button that is not raised as high.
about 1 month ago
How do you pronounce your first name, Rogie? Roo-gee?
about 1 month ago
Jason, it's pronounced "Raw-gee"
about 1 month ago
Minus the Star Wars references, this is awesome!
about 1 month ago
Tom, for that comment, you get tossed into the sarlac pit!
about 1 month ago
Rebound
Rogie's Mad Elements in pure CSS
July 09, 2010
I *had* to try it. No image used, it's pure CSS.
about 1 month ago
Wow Max, nice work. Link it up that CSS!
about 1 month ago
@Rogie just mailed you the link - as you don't follow me on Twitter :(
about 1 month ago
Can I get it on a stick? Nice work presenting a fresh style bro.
about 1 month ago
Star Wars geeks take note: Han is listed *before* Greedo.
about 1 month ago
Just love it, specially the colors. Great shot!
about 1 month ago
Playing with additional colors: http://drbl.in/34168
about 1 month ago
Max, nice work and way to stay dedicated to the cause! I've got a few people doing CSS on Forrst as well, so this should be really cool to compare two different takes on this. Awesome stuff!
about 1 month ago
@Dave Simon dude, you teach these folks. Teach em I say. Han Solo is teh rule.
about 1 month ago
Come on chaps, Dribbble's all about sharing. Here's a little something for others to play with:
<div class="submit"><input type="submit" value="Push Me" /></div>
<style type="text/css">
.submit input { font-weight: bold; border: 1px solid #2356a1; padding: 9px 15px; color: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; text-shadow: 0 -1px 0 hsla(214,100%,0%,.5); background: #1161a0; background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #3fa0ff), color-stop(1, #2356a1) ); background: -moz-linear-gradient( center top, #3fa0ff 20%, #2356a1 100% ); -webkit-box-shadow: inset 0 1px 1px hsla(0,100%,100%,.4), inset 0 -1px 0 hsla(0,100%,100%,.3), 0 4px 0 hsla(212,77%,26%,1), 0 5px 2px hsla(214,100%,0%,.5); -moz-box-shadow: inset 0 1px 1px hsla(0,100%,100%,.4), inset 0 -1px 0 hsla(0,100%,100%,.3), 0 4px 0 hsla(212,77%,26%,1), 0 5px 2px hsla(214,100%,0%,.5); box-shadow: inset 0 1px 1px hsla(0,100%,100%,.4), inset 0 -1px 0 hsla(0,100%,100%,.3), 0 4px 0 hsla(212,77%,26%,1), 0 5px 2px hsla(214,100%,0%,.5); }
</style>
about 1 month ago
Thanks Mat, I'm so gunna have a play with that later :)
about 1 month ago
OMG Mat, that's awesome !
about 1 month ago
Mat, awesome stuff! The one thing that bothers me is the use of a surrounding div. I'll have to come up with a solution that doesn't use any extra markup.
about 1 month ago
Rogie, it doesn't require the extra div, it works without it.
about 1 month ago
Chris, totally missed it. I figured since the markup was there, that it was actually styled. My bad.
about 1 month ago
Yeah. Your bad. TOTALLY.
about 1 month ago
@Sean Nelson the font used is Aller, an awesome find shared with me by Tim Van Damme.
about 1 month ago
@Rogie yeah! Love me some Aller too!
about 1 month ago
These just might be my fave form elements ever. Seriously lickable.
about 1 month ago
@Rogie Nice. I've used Aller before. Surprised I didn't recognize it. Thanks!
about 1 month ago
Wow the buttons in gray look AMAZING! And love the combined buttons depth as well.
about 1 month ago
Rebound
Mad Button
August 21, 2010
Started to work on some CSS3 buttons and had to try Rogie's "Mad Style" (like many others too). There is just one image used.. yes, the noise.
This is just a first version.. still some tweaking needed. Plus different colours and maybe icons?
12 days ago