2D Buttons css

Envato Customers Looking For
1

You know these buttons with the bottom border a darker shade of the main button bg color ?

Ok where can i get a heap of them on here, what are they called and how do you guys pick the color combinations.

I can code them, its the dang css color relationshipbit that gets me, ie picking the right shades.

I would rather buy here than anywhere else. I dont want long shadows.

Australia

2
  1. Open photoshop and create new document
  2. Fill it with main button color, for example green
  3. Create new layer over that one, fill it with black and set opacity to 5 ~10% (totally up to you, but you should use the same opacity for all other buttons
  4. Boom - there is your shadow color.
3

Good idea diwave thanks but, i wanted to use border-bottom rather than box shadow. But will give that a go, goodonya maybe your solution is far more elegant, i have a feeling it is lol.

By border-bottom you know css code where we display three #colors to define border for bottom

Cheers ste

4

Of course you will use colors in your CSS, not photoshop images. I mentioned above solution for “picking the right shades” of original color which means you will have to use Colorpicker in Photoshop to pick shade color.

Having it done in CSS automatically with border is not possible. Maybe with LESS (I never used that) or php coded CSS file. For that, you may want to check this out.

5

Lol im not that stupid, nevermind this is veering off into beginner territory. Thanks.

6

I’m not exactly sure what you’re looking for, but I interpreted it as “how do I get the shadow color?”

There’s likely a more elegant way than this, but it was fun to “fiddle” anyway. I simply reduced the current border-bottom color by 30.

http://jsfiddle.net/34n3kzfv/

7

Ahhh smart arse thats great thanks

8

What you’re looking for is a set of complimentary color schemes…

https://kuler.adobe.com/create/color-wheel/

9
Endat said

What you’re looking for is a set of complimentary color schemes…

https://kuler.adobe.com/create/color-wheel/

P.E.R.F.E.C.T. thanks just what i was after !