Adding Rollover Buttons to your WordPress Website

ABSTRACT: A tutorial to teach you how to create image rollover buttons using CSS.

rollover buttons using cssI’m not going to teach you all about CSS and HTML elements here. I’m going to assume some knowledge; that you know what CSS is and that you know what a <div> tag is.

If not, go here.

A Summary of the Steps Needed to Create Rollover Buttons using CSS. More explanation below.

  1. Create and upload button images (2 images per menu item)
  2. Create CSS: div id and div id hover styles in the Custom CSS section under Theme Options.
  3. Create HTML – div tags in a sidebar text widget in WordPress
  4. Enjoy your rollover menus

The Details

Creating your rollover images

First, you need 2 buttons for each menu item.

Image 1 is the button visitors see when they come to your site but have not placed their mouse pointer over the button.

btncoaching

Image 2 is the button visitors see  when they place their mouse pointer over the button – hover. The hover button.

btncoaching-hover

I name my buttons the following:

btncoaching.png & btncoaching-hover.png

In my case, the buttons are 300 x 80, 96dpi.

Read: Automating the creation of button images using MS Publisher. (with downloadable template and code)

Upload your images to wordpress

Once created, upload the images to WordPress. You can upload the buttons using the Media library in WordPress but I want all my buttons to be in the same folder online. I use my hosting companies file manager or FTP.

If I make color or layout changes to my buttons, I may need to replace all of the buttons at one time. Rather than track down where they are in the WordPress Media Library, I have an images folder for my buttons. I simply overwrite the old images with the new images and the menus are changed. Much faster!

I’ll include the CSS and the HTML for the divs below. Then I’ll explain it.

The CSS

The following goes into the Custom CSS section of your WordPress theme.

div.btnlarge {
width: 300px;
height: 80px;
}

#mnucoach {
background: url(‘imagepath/btncoaching.png’) no-repeat;
}

 #mnucoach:hover {
background: url(‘imagepath/btncoaching-hover.png’) no-repeat;
}

 

The DIV HTML

The HTML with links is below. 

<a href=”http://www.matthewmoranonline.com/coaching/” title=”executive coaching”><div id=”mnucoach” class=”btnlarge”></div></a>

 

The CSS Explained 

div.btnlarge applies to multiple buttons. Basically, a class selector is more a category selector in HTML. Every button with matching characteristics can be defined by the characteristics of it’s class selector. So the width (300px) and height (80px) of our coaching buttons plus the other buttons I have on my page. Speaking, Music, writing, and blog.

They all have the same class selector – btnlarge. 

#mnucoach is an id selector and must be unique for each button and each div. 

#mnucoach:hover is the add-on (psuedo) selector that defines what happens to the mnucoach div when the mouse pointer is placed over it.

background: url(pathtoimage) no-repeat; specifying the background image for the div and also that it does not repeat (tile). The fact that the div is exactly as large as the image, it shouldn’t but I include it anyway. 

imagepath is a placeholder. You should use the on your site where the images reside. Something like: “http://www.yoursite.com/images/website/”

 

The HTML Explained

<a href…><div id=”mnucoach”….></div> 

You’ll notice the div is empty. Also, it is surrounded by a standard <a href…> link.

Here is why. You are not changing the characteristics of an img (<img> tag) when you perform your rollover. The “:hover” selector does NOT work with images. But it works with <divs>. The entire <div> is the link, not the image. It just so happens that we are instructing the <div> to match, precisely, the size of our images. 

And then we simply use the :hover selector to change the background of our div tag to a different image.

Additional buttons

For clarity’s sake, I’m going to include the CSS and the HTML <div> tags for the following images: Coaching, Speaking, Music, Writing, and Blog.

CSS

div.btnlarge {
width: 300px;
height: 80px;
}

#mnucoach {
background: url(‘imagepath/btncoaching.png’) no-repeat;
} 

#mnucoach:hover {
background: url(‘imagepath/btncoaching-hover.png’) no-repeat;
}

#mnuspeak {
background: url(‘imagepath/btnspeaking.png’) no-repeat;
}

 #mnuspeak:hover {
background: url(‘imagepath/btnspeaking-hover.png’) no-repeat;
}

 #mnumusic {
background: url(‘imagepath/btnmusic.png’) no-repeat;
}

 #mnumusic:hover {
background: url(‘imagepath/btnmusic-hover.png’) no-repeat;
}

 #mnuwriting {
background: url(‘imagepath/btnwriting.png’) no-repeat;
}

 #mnuwriting:hover {
background: url(‘imagepath/btnwriting-hover.png’) no-repeat;
}

 #mnublog {
background: url(‘imagepath/btnblog.png’) no-repeat;
}

 #mnublog:hover {
background: url(‘imagepath/btnblog-hover.png’) no-repeat;
}

DIV HTML

Note.. I have an outer div that contains all the others to ensure the default padding and line-spacing on theme does not apply to my button divs.

<div style=”line-height:0px; padding:0px;”>
<a href=”http://www.matthewmoranonline.com/coaching/” title=”executive coaching”><div id=”mnucoach” class=”btnlarge”></div></a>

<a href=”http://www.matthewmoranonline.com/speaking/” title=”executive coaching”><div id=”mnuspeak” class=”btnlarge”></div></a>

 <a href=”http://www.matthewmoranonline.com/songwriter/” title=”Matt’s Music”><div id=”mnumusic” class=”btnlarge”></div></a>

<a href=”http://www.matthewmoranonline.com/author/” title=”Matt writes and blog for a number of publications”><div id=”mnuwriting” class=”btnlarge”></div></a>

<a href=”http://www.matthewmoranonline.com/blog/” title=”advice, music, and musings on Matt’s blog”><div id=”mnublog” class=”btnlarge”></div></a>

</div>


 I hope all of that was clear. Let me know if I missed something or you want greater clarity.

Posted in Blog, Tools and Tips and tagged , , , .

Add your thoughts here! You know you want to...