Css Buttons

 You basically create what's called a 'sprite', which is an image with two separate states in it (one is the button as it would normally look, and the other is a button as it would look in its 'hover' state.

However, there are a couple things you need to consider before you even start writing the CSS for the hover state:

• If you want to keep your webite 'semantic', you'll need to use an unordered list, or at least have the text in the html, for the button(s).
• If you're okay with just having a graphic button, it makes life easier, but will not be as indexable via Google.

Now, until CSS3 hits the mainstream, with it's awesome 'multi-background' and border image elements (don't cross your fingers; it's gonna be a while, as Safari/Webkit browsers are the only ones that support most of the standard yet), it's complicated to keep semantic, meaningful html, as well as have beautiful looking buttons.

I'll point you to two different articles that are quite helpful in making beautiful buttons:

1. The Sliding Doors of CSS: Shows you how to make buttons that have rounded corners and other niceties, while maintaining accessible, clean, and beautiful html code.
2. CSS Sprites and Another Article on CSS Sprites: This is the method you've roughly outlined in your post above. Basically, you use your CSS's positioning ability to position the background image in the appropriate place to make a beautiful button/hover image. All without ugly HTML!

Any time! And yes, even the name for it came straight out of 2D game-making textbooks. Instead of Mario running, jumping on mushrooms, and shooting shells all over the place, we're making buttons!

ImageReady is perfect for creating sprites for mouseover buttons!  That's what I use.  If you need any help, let me know.