A little hat trick I tossed up. Normally I would create buttons as images using Photoshop, however with the magic of CSS 3.0, you can produce the exact same result, complete with hover animations too.
What sells it is the new linear gradient background value, with stop points meeting at halfway to achieve the specular highlight effect. A one pixel text shadow makes the text look indented, and the box shadow gives the button depth, with border radii rounding off the corners. Then you have CSS transitions, oh how I love transitions, the bread and butter to those beautiful animations upon :hover-ing over the div. They tween almost any property that is changed within pseudo states. I only adjusted a few things for sake of simplicity, however you could transform the button into an entirely different size and shape. Check out the CSS tab below for a closer look at the code!
Now who wants some juicy jQuery bacon?
