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)
- 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:
background: url("https://PathToImageLocation/catalog.jpg") no-repeat 0 0;
Button Rollover Status:
background: url("https://PathToImageLocation/cataloghov.jpg") no-repeat 0 0;
Insert a Content Editor Web Part on the page where you want to display the button. Make all applicable changes to the web part, such as giving it a meaningful name, removing the chrome, etc.
Select the Content Editor Web Part Click here to add new content link.
Locate the HTML icon within the Markup section of the ribbon, select it, and then select Edit HTML Source.
Type in or copy and paste the code below in the HTML Source web page dialog that displays: