Posted By

michellebracken on 08/18/11


Versions (?)

3D Buttons with CSS Only

 / Published in: CSS

3D CSS buttons are easy to create. The trick is to give your elements borders with different colors. Lighter where the light source shines and darker where it doesn’t.

The CSS will create a button with the light source at the upper left. Usually one or two shades of color change is all that’s needed, but you can experiment for different effects.

  1. div#button {
  2. 2 background: #888;
  3. 3 border: 1px solid;
  4. 4 border-color: #999 #777 #777 #999
  5. 5 }

Report this snippet  

You need to login to post a comment.