Using a handful of CSS3 styles implemented by Webkit (Safari and Chrome) and Firefox browsers, I’ve recreated buttons which I previously did with images, all in some simple CSS. I used the following styles:

• Background-image gradients
• Border radius
• Text shadow
• Box shadow
• Custom fonts

The page is shown here in an iframe:

If you have a keen eye you’ll see I’m using some borders on the top and bottom to simulate bevels, I’m using a custom font, Sansation, courtesy of dafont.com, and the text shadows are cast upward when hoving over the button.

Best part is, I’m using no javascript, and whenever I change the text of the buttons, I don’t have to re-export images with the correct text. Won’t the world be a lovely place when all browsers support the full HTML5/CSS3 spec?