I know the classic bevel and emboss is a bit of a dated and heavy-handed Photoshop trick but sometimes when you’re developing a site from someone else’s design, you’ve got to go with the flow. That being said, I recently was presented with such a design and since the target audience was a little more savvy and the vast majority would be on newer devices, I used pure css to create a bevel and emboss effect on the call to action buttons. Here’s the code I used…

box-shadow: inset 3px 3px 3px rgba(255, 255, 255, 0.8), inset -3px -3px 6px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 3px 3px 3px rgba(255, 255, 255, 0.8), inset -3px -3px 6px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 3px 3px 3px rgba(255, 255, 255, 0.8), inset -3px -3px 6px rgba(0, 0, 0, 0.3);

You can use multiple box shadow rules on a single element so one “pushed” and one “pulled” equals a decent, and efficient look that should perform well in newer browsers and devices.