For this solution I use:
- One image per button needed
- CSS
- Content Editor Web Part
I also like to refer to this solution as the "stacked image" solution.
Step 1 - Create The Necessary Rollover Button Images
Use the imaging tool of your preference, such as Photoshop or Fireworks, to create an image for every button you will be needing for your particular case. You cann also get the buttons from a reliable, trusted source. Make sure that all of your buttons are of the same exact size and shape so it looks better. Once you have created or acquired the
For our example, we're going to pretend that our image is contactus.png.
Step 2 - Create The Necessary CSS Styles
Within your copy of Microsoft's original css file, create the following classes,
{
display: block;
width: 210px;
height: 106px;
background: url('https://PathToImageLocation/contactus.png') no-repeat 0 0;
}
#contactUs:hover
{
background-position: 0 -106px;
}
#contactUs span
{
display: none;
}
Step 3 - Display The Button On The Appropriate Page
Add a Content Editor Web Part to the page where you would like 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: