Make 3D buttons view 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.

div#button {background: #888; border: 1px solid; border-color: #999 #777 #777 #999 }

The CSS above 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.

Permanent link to this article: https://blog.openshell.in/2010/11/make-3d-button-view/

Leave a Reply

Your email address will not be published.