Playing around with some button styles (all in code except the background). I've included the code, Enjoy!
about 1 year ago
These are some I did recently:
With drop shadows, people often go overboard and I think you have done too. A drop shadow should be subtle and light and in your case, I think it should be small, like I have done it. Also, make sure the style is matched, because you've really got two different buttons that don't match in style. The blue one has a border and an inner shadow while the light one doesn't. The text on the blue one is white with a drop shadow making it outset, while on the light one, the text is dark with a white shadow making it inset. Just small things to take into consideration, but they are pretty nice.
I prefer the larger drop shadows personally, I don't think they're overboard.
The light button does have borders and inner-shadow (see the code). It's just very subtle. The blue button is meant to look different as its the call to action. You are right about the Dropshadow emboss/deboss comment, but it was intentional to differentiate the buttons on purpose.
I appreciate your comments though and nice attention to detail :) thanks man!
Dude love em. The one thing I would suggest is making the outline for the grey button a little sharper (maybe using a darker stroke?).
I LOVE the press state for the blue button. That's what I'm talking about.
@Charles Riccardi get your stroke on, get your beat on, get your fußball on.
That was awesome to include the code, and nice work! :)
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter