This solution is for when you need to publish a button on a page, not on the Top Nav or Quick Launch.

I prefer using one single image per button and make the image "shift up and down" depending on whether is just active or being hovered. But there are going to be situations where two images are necessary. This is one solution I use for those cases.

For this solution I use:
    - Two images (one for each button status)
    - CSS
    - Content Editor Web Part

Step 1 - Create The Necessary Images Using a Graphics Tool

Create your own button using an application such as Photoshop or Fireworks, or use one from a trusted source.

The trick is to make the images look exactly the same size so when they swap they do so seamingless. You should also make sure that the label you will be using is of the exact same font type and size for both images. Feel free to change the font colour if the background of oneof the images merges too much with it. However, make sure to keep it the same size and font family, as well as position within the image, so they swap smoothly.

Once you have created or acquired the necessary images, upload them to the SharePoint library of your choice.

For our example we're going to pretend that our images are catalog.jpg and cataloghov.jpg.

Step 2 - Create The Necessary CSS Styles

Within your copy of Microsoft's original css file, create two classes. One will be used for one button status, while the other one will be used for the other button status.

Button Normal Status:

Change width and height to match your image width and height, as well as the location to the file itself.

Button Rollover Status:

Replace the id value above with the name of your own CSS, as well as the title applicable to your own situation. Don't forget to also replace the URL to point to the file, site, Web site, library, etc., applicable to your needs.