Tutorial button | xhtml + css
Tutorial button with jQuery effect | xhtml + css + javascript
Going pro | become a xhtml + css expert
Learn more about css sprites to make multiple buttons in one image. It's not that difficult once you understand how to position the image.
As you can see jQuery is not always the right choice. The badges have a different text on hover, but this is not that nice with jQuery (left badge). So keep in mind that more effects is not always the best choice. Besides that, this example is to show you that you can apply this effect on many things. So think out of the box.