Anchors are inline elements, which means they only activate when you click on the con-
tent of the link. However, there are instances when you want to create more of a button-
like effect with a larger clickable area. You can do this by setting the display property of
the anchor to block, and then changing the width, height, and other properties to create
the style and hit area you want.
a {
display: block;
width: 6em; /* dimensions needed for IE5.x/Win */
padding: 0.2em;
line-height: 1.4;
background-color: #94B8E9;
border: 1px solid black;
color: #000;
text-decoration: none;
text-align: center;
}
Simple rollovers
a:hover {
background-color: #369;
color: #fff;
}
Rollovers with images
The code for this example is similar to the preceding example. The main difference is that
background images are being used instead of background colors.
a:link, a:visited {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
color: #000;
text-decoration: none;
background: #94B8E9 url(images/button.gif) no-repeat left top;
text-indent: 50px;
}
a:hover {
background: #369 url(images/button_over.gif) no-repeat left top;
color: #fff;
}
This example uses fixed-width and -height buttons, which is why I have set explicit pixel
dimensions in the CSS. However, there is nothing to stop you from creating oversized but-
ton graphics, or using a combination of background colors and images to create a fluid or
an elastic button.
Pixy-style rollovers
multiple background images, use a single image and switch its background
position instead.
The code is almost identical to the previous example. However, this time you align the
rollover image to the left for the normal link state, and then shift it to the right for the
hover state.
a:link, a:visited {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
color: #000;
text-decoration: none;
background: #94B8E9 url(images/pixy-rollover.gif) no-repeat left top;
text-indent: 50px;
}
a:hover {
background-color: #369;
background-position: right top;
color: #fff;
}
Unfortunately, IE on Windows still makes a round-trip to the server to request a new
image, even though all you are doing is changing the alignment of the image. This causes
a slight flicker, which can be a little annoying. To avoid the flicker you need to apply the
rollover state to the link’s parent element, for example, its containing paragraph.
p {
background: #94B8E9 url(images/pixy-rollover.gif)
no-repeat right top;
}
The image will still disappear for an instant while it is being reloaded. However, during this
time, the same image will be revealed underneath, hiding the flicker.
Visited-link styles
You can create a very simple visited-link style by adding a check box to every visited link:
a:visited {
padding-right: 20px;
background: url(check.gif) right middle;
}
li a {
display: block;
width: 300px;
height: 30px;
line-height: 30px;
color: #000;
text-decoration: none;
background: #94B8E9 url(images/visited.gif) no-repeat left top;
text-indent: 10px;
}
li a:visited {
background-position: right top;
}
