How to make 3D Buttons with CSS Only

3D Buttons with CSS Only

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.

1	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.