Home Page
Blog

Image Buttons using CSS

Google

Introduction

There are many ways to create colourful buttons with rollover and click effects in web pages. One of the more recent additions is to use styles to define an image for the button, and the :hover style to change the image when the mouse is moved over the button. This is an easy and effective way to create good looking pages. Often however, it is necessary to have several buttons with the same style of button but different text. Rather than creating lots of button images with different text, this article will look at a way to create a button that has the required text superimposed on it.

Example Buttons

The following buttons show the sort of effect that can be achieved.

CodeWrite Blog
ASP.NET


Firefox style button


Button Design

The buttons above essentially consist of three images - a left side, right side, and middle. The left and right sides allow rounded buttons (for example) to be created. The middle image in the buttons above is one pixel wide and is repeated (background-repeat: repeat-x) so that any width button can be created. The height of the images is the same for all the images, so different height buttons require more images to be uesd. The text is a hyperlink in the middle image, which has the underline turned off (text-decoration: none) to improve the way it looks. The image below shows how the images are displayed using DIVs:

button text


The whole button is contained in a single DIV, which contains three image DIVs (using float: left). The main DIV also contains the link, with the text. This is positioned absolutely, so that we can superimpose it on top of the images.

Button HTML

The buttons are made up of four DIVs. The main DIV inherits two style classes; the ImageButton class has all the shared button style (which is actually just float: left), and the Button33 style which is the style for that particular button type. The Button33 class doesn't actually have any style directly associated with it, but it does allow us to create six child styles (left, middle, right, hover:left, hover:middle and hover:right). These are described in the next section.

<div class="ImageButton Button33" style="margin-left: 50px;">
    <div class="ButtonLeft"></div>
    <div class="ButtonMiddle" style="width: 80px;"></div>
    <div class="ButtonRight"></div>
    <a class="ButtonText" href="http://www.asp.net" target="_blank" style="width: 102px;">ASP.NET</a>
</div>

Note that the width of the text is the width of the button, and the width of ButtonMiddle is the button width minus the left and right image widths.

Styles used for the Buttons

There are four styles that are used regardless of the button images used. These essentially specify the common layout. ImageButton specifies relative positioning because the text will be positioned absolutely relative to this element.

.ImageButton
{
    position: relative;
    float: left;
}

.ImageButton .ButtonLeft
{
    float: left;
    background-repeat:no-repeat;
}
.ImageButton .ButtonMiddle
{
    float: left;
    background-repeat: repeat-x;
}
.ImageButton .ButtonRight
{
    float: left;
    background-repeat:no-repeat;
}
.ImageButton .ButtonText
{
    position: absolute;
    top: 0px;
    left: 0px;
    text-align: center;
    text-decoration: none;
}

There are four styles that are specific to a particular type of button. Three specify the images and their sizes. The forth specifies the text font and size.

.Button33 .ButtonLeft
{
    width: 11px;
    height: 33px;
    background-image: url(Images/ButtonOffLeft.gif);
}
.Button33 .ButtonMiddle
{
    height: 33px;
    background-image: url(Images/ButtonOffMiddle.gif);
}
.Button33 .ButtonRight
{
    width: 11px;
    height: 33px;
    background-image: url(Images/ButtonOffRight.gif);
}
.Button33 .ButtonText
{
    color: Blue;
    font-size: 16px;
    font-family: Verdana;
    font-weight: bold;
    padding: 8px 0;
}

Three styles specify the images for when the mouse is over any part of the button. It is not necessary to specify the size as these images should be the same size as the previous images.

div:hover.Button33 .ButtonLeft
{
    background-image: url(Images/ButtonOnLeft.gif);
}
div:hover.Button33 .ButtonMiddle
{
    background-image: url(Images/ButtonOnMiddle.gif);
}
div:hover.Button33 .ButtonRight
{
    background-image: url(Images/ButtonOnRight.gif);
}

Optionally, if you want the text colour to change when the mouse is over the button, you can use a style like:

div:hover.Button33 .ButtonText
{
    color: White;
}

Points to Note

In order for :hover to work on DIVs (or any element other than links) in IE7, you need to specify html strict the following at the top of the page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

I have used two techniques with the styles:

This allows us to essentially create a base class (ImageButton) and have derived classes (e.g. Button33) that only have styles that are unique to that button (i.e. the images and their sizes). Also, we only have to specify the Button33 class once, on the main DIV, and not on the left, middle and right elements.

Revision History