Home Lessons & Videos Site Building Intermediate How to create a rollover button

How to create a rollover button

Affilorama members only


Watch a preview Join for free

How to create a rollover button

2009-02-24 01:29:46

In this lesson we'll be explaining the steps involved in creating a rollover button and how to add it to a page on your site.

A rollover button provides an eye-pleasing option to your site as an alternative to a standard hyperlink. When a user hovers their mouse over the button image it magically changes - a great party trick to impress all your friends!

There are a variety of methods for doing this but we're going to show you the cleanest, most browser-friendly option. A small caveat, however: while this method generally works fine on modern computers (from the last five years or so), you may find it a little hit-and-miss on anything older, so be cautious.

There are three aspects to this process:

  1. Creating the image
  2. Adding the HTML to the page
  3. Adding some new styles to the CSS file

Step 1 – Create the image

What you need to do is create a single image that includes your button in its normal state as well as its rollover state; the final image will be exactly twice the height of the button size.

For example, if your button size is 100 pixels wide and 20 pixels high, then the image you are creating will be 100 pixels wide and 40 pixels high.

Step 2 – The HTML

We simply insert a search engine friendly hyperlink in the code, as shown here.

<a id="clickMe1" href="somepage.htm"><span>Click Me</span></a>

It is important we give the link a unique ID, as in this example it is clickMe1. This is particularly important if we are adding more than one rollover button. The second button will be clickMe2 etc. The reason for this will become obvious in the next step.

Step 3 – Adding the CSS

This is where a little bit of CSS magic comes in to play and transforms our ordinary looking hyperlink into a super impressive rollover button.

Add the CSS code shown here to your CSS style file, replacing clickMe1 with the ID you have used as well as updating the image file name. If the image isn't stored in the same folder as your CSS file then add the full URL.

  display: block;
  width: 100px;
  height: 20px;
  background: url("clickme.gif") no-repeat 0 0;

  background-position: 0 -20px;

#clickMe1 span
  display: none;

You should also change the “width” and “height” so that it's the same width and height as your button. Remember that you've made your original image twice as high as your actual button, so your “height” number should be half the height of your image.

Lastly, look at the part that refers to background position, as shown here.

background-position: 0 -20px;

Substitute -20 with the number you just used for “height”, with a minus in front of it. So if the total height of your button is actually 60 pixels and not 40 as we've used in our example, then change it to what's shown here.

background-position: 0 -30px;

Save the changes to your CSS file. That's it – you're done!


Lesson Summary

In this lesson we looked at how you can easily make a rollover button that works on multiple computers. The three steps were:

  1. Creating the image
  2. Adding the HTML to the page
  3. Adding some new styles to the CSS file


Learn something new? Share it with your friends!


Questions & Comments + Add a comment


Don't forget to follow us!

More topics

Essential Resources Every New Affilia... New to affiliate marketing? Not sure what it's all about? Then let us get you started!
Affiliate Outsourcing No one person can do everything on their own. Learn how to reduce (or even eliminate!) your workload with outsourcing.
Site Building As an affiliate, chances are you'll end up building a website or two. Here's your basic quickstart!
Marketing Ideas Needing inspiration? Wanting to go outside the box? Take a look in here for your next few marketing ideas!
Market Research for Affiliate Marketers To be a successful affiliate you must learn how to research their market before dedicating your precious time.
Pay Per Click Pay-per-click is one major method affiliates use to get traffic. Learn what it is and how you can use it effectively!
Search Engine Optimization Search engine optimization (SEO) is a major way of getting traffic to your site at minimal cost! Learn how to put it ...
Content Creation This section is all about content: How to write it, how to get it written for you, and other useful goodies!