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:

#catalog
{
    display: block;
    width: 155px;
    height: 60px;
    background: url("https://PathToImageLocation/catalog.jpg") no-repeat 0 0;
}


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

Button Rollover Status:

#catalog:hover

    background: url("https://PathToImageLocation/cataloghov.jpg") no-repeat 0 0;
}
 
Step 3 - Create The Content Editor Web Part to Display the Button

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:

<DIV align=center><A id=catalog title="Catalog" href=DestinationURLhere target=""></A></DIV>

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.
Newie
4/22/2016 05:14:36

I will start trying!!

Reply

Your comment will be posted after it is approved.


Leave a Reply.