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.
The following buttons show the sort of effect that can be achieved.
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:
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.
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="ButtonMiddle" style="width: 80px;"></div>
<a class="ButtonText" href="http://www.asp.net" target="_blank" style="width: 102px;">ASP.NET</a>
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.
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.
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.
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
Optionally, if you want the text colour to change when the mouse is over the button, you can use a style like:
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.