Create SEO Friendly CSS Rollover Buttons

Rollovers are a useful visual effect indicating that something is clickable. In the early days of HTML and web design, the only way to create rollover buttons was through Javascript, which relied on scripts being enabled along with adding a lot of extra code and slowing the entire page down.

It’s now possible to use CSS to create the same effect, but more efficient and will work even if Javascript is disabled. The hover effect of the “Back to Downloads” button below is created entirely through CSS.

So how do we go about creating this?

Method 1: Stack The Two Images (Recommended)

The method I recommend is to create one single image with both the regular image and the hover effect stacked above each other.

This will be slightly difficult as it will require the use of a powerful image editor such as Adobe Photoshop, Paint.NET, or GIMP. I recommend creating two separate images of the same dimensions first and then stacking them.

Find out the dimensions of the full image. In the case of my buttons, it would be 159 px by 72 px. Since the images are stacked on top of each other, each button image is 159 by 36.

The HTML

In the HTML code, add the following for the link that your button links to.

<a id="download" href="#" title="Back to Downloads"><span>Back to Downloads</span></a>

Replace “download” with your own unique ID for CSS. Replace “Back to Downloads” with your own text. The text between the span tags is the text that search engines would see, however, we are going hide that from regular visitors.

The CSS

Apply the following CSS:

#download {
  display: block;
  width: 159px;
  height: 36px;
  background: url("download.gif") no-repeat 0 0;
}

#download:hover {
  background-position: 0 -36px;
}

#download span {
  display: none;
}

Replace “download” with the ID you specified earlier. Replace the dimensions with your own dimensions. Remember that the width value should be the same as the full image (with two buttons) and the height value would be half of the full height. Replace the URL area with the path to your button.

Applying the CSS

To apply the CSS to your HTML page, add it to an existing CSS file or save it as an external .css file and add this line to the head section of your HTML page (like any other CSS):

<link rel="stylesheet" href="Path to CSS File" type="text/css" />

Alternatively, the CSS can be applied by adding the following to the head section of the HTML file:

<style type="text/css">CSS HERE</style>

Method 2: Two Button Images

If you can’t create a stacking image, you can create two separate button images instead. However, be warned that browsers will not prefetch the hover image and therefore will trigger a flickering effect while the hover button is being downloaded.

After creating two separate button images, follow “The HTML” section in Method 1 and then apply the following CSS following the methods stated in the “Applying the CSS” section above:

#download {
    display: block;
    width: 159px;
    height: 36px;
    background: url("backtodownloadNormal.gif") no-repeat 0 0;
  }

#download:hover {
  background: url("backtodownloadHover.gif") no-repeat 0 0;
  }

And there you have it. An SEO button link with rollover effects without touching Javascript at all.