For a recent task, I had to make a button look slighly '3D', to make it 'pop' out of the page, to give it a bit of a bump or popping out effect. I wanted to do this entirely in HTML5 & CSS3, so I used the new box-shadow and rgba declarations in CSS3.
Basically I made an internal box shadow on the top and left most edge of a mostly transparent white colour, and a inner shadow on the bottom and right edges of a mostly trasparent black shadow. This makes it look like the light source is coming from the top right. To change that, adjust some of these values below.
Since thisd uses transparent colours, it works with any sort of 'button' type thing and any sort of background colour. In the examples below, I use a blue button, but the same CSS declaration/rule would work just aswell if the item's background-color was anything else.
Here's the code:
box-shadow: inset -5px 5px 5px rgba(255, 255, 255, 0.15), inset 5px -5px 5px rgba(0, 0, 0, 0.15);
Here's an example:
Button
And without the 3D effect (as you can see, not as nice):
Button
You can even apply it to items that have rounded corners, to make it look better
Button