Button styles (with css)


1 Attachment

6 Responses

  1. Aubrey Aubrey

    Playing around with some button styles (all in code except the background). I've included the code, Enjoy!

    about 2 years ago

  2. Flavius Mihaiu Flavius Mihaiu

    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.


    about 2 years ago

  3. Aubrey Aubrey

    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!

    about 2 years ago

  4. Charles Riccardi Charles Riccardi

    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.


    about 2 years ago

  5. Aubrey Aubrey

    @Charles Riccardi get your stroke on, get your beat on, get your fußball on.

    about 2 years ago

  6. Virginia Poltrack Virginia Poltrack

    That was awesome to include the code, and nice work! :)


    almost 2 years ago

keyboard shortcuts: previous shot next shot L or F like