Table2CSS logo Table2CSS is a tool that can convert your table-based websites to tableless layouts, replace deprecated HTML tags with modern CSS and reformat your HTML code. Click here for more information

How to create a rollover image button in HTML and CSS without any JavaScript

What is a rollover button?

Rollover buttons are buttons which change their look when the user places the mouse pointer over the button. Here is a working demo of a rollover button:

In this article we explain how to create a rollover image button using HTML and CSS code without any JavaScript.

How to create a rollover button?

First we need to create two images of the button - one image for the button in normal state and another image for the button in depressed state (used when the mouse hovers over the button).

Regular button (Right-click on the box image and choose "Save As" to save it locally on your disk).

Regular button

Depressed button (Right-click on the box image and choose "Save As" to save it locally on your disk).

Depressed button

In order to display the button in its regular state we are using a box with a fixed width and height and the button image as a background. To display the button in a depressed state when the mouse hovers over it, we are using the :hover CSS pseudo-class. The only HTML element for which Internet Explorer 6 is able to handle the :hover pseudo-class correctly is <a> so we use the <a> element as a box for our. Also please note that we need to specify the href attribute for the <a> element, otherwise in IE6 the :hover pseudo-class will not match the <a> element when we the mouse pointer hovers over the element.

Here is the sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
a.rollover {
	display: block;
	width: 80px;
	height: 30px;
	background-image: url('button_regular.png');
}

a.rollover:hover {
	background-image: url('button_depressed.png');
}
</style>
</head>
<body>
<a href="#" class="rollover"></a>
</body>
</html>

We can further optimize the code by merging the two images into one single image and displaying only a part of the image for the regular and depressed buttons.

Here is the merged image. Right-click on the box image and choose "Save As" to save it locally on your disk.

Combined button

The height of the image is twice the height of the button, so only the top half of the image will be displayed for the regular button. The bottom half of the image is used for the depressed button by specifying the background-position property on mouse hover.

Here is the sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
a.rollover {
	display: block;
	width: 80px;
	height: 30px;
	background-image: url('button_combined.png');
}

a.rollover:hover {
	background-position: center bottom;
}
</style>
</head>
<body>
<a href="#" class="rollover"></a>
</body>
</html>

This optimization allows us to load just one image in the beginning, so we can avoid the delay between the mouse hover and the display of the pressed button.