This is a quick and easy way to give buttons a 3D beveled edge using CSS only. By styling each ‘a tags’ borders with a separate color you can achieve a quality 3D look that is light weight and requires no external images. There is no image swap for rollovers and no JavaScript. Just an unordered list in your xHTML markup.

This finished product should look like this!

Make sure to simulate the direction light travels in order to get the right effect!

Other techniques use the inset/outset attribute but that will produce different results in different browsers. This method give you more control. The CSS is fairly simple but you must remember to swap border colors for the active state to get the desired depressed effect. Take a look at the source code and CSS to see what I mean.