Creating Rollover Buttons

Rollover buttons change their appearance when your visitor points at or hovers over them.

To change links on rollover:

1.	Create a set of links in the usual way in the (X)HTML document (see page 103).
2.	In the CSS, style the a:link and a:visited selectors with the "initial state" of the links by adding background color or image properties.
3.	Modify the colors or backgrounds slightly for the a:focus and a:hover selectors so that the buttons change appearance when they get the focus or are pointed at.
4.	If desired, select a third style for buttons when they're activated by setting the CSS for the a:active selector.

Tips

• This is a very simple example. You can do wonders by designing and choosing special images. For more ideas, see the article by Douglas Bowman on Sliding Doors of CSS at A List Apart: http://www.alistapart.com/slidingdoors

• I used the display:block to format the usually inline a elements as block-level elements, each beginning its own line. This is not necessary for rollover buttons; you could just as easily have them in a horizontal row.

Figure 12.7. In this simple example, the unvisited and visited links have one color for background and border, the focus and hover links have a slightly darker background and border, and black text, and the active links have an even darker background and border.

Figure 12.8. The unvisited and visited states are shown at left. When the visitor points (hovers) or gives the focus to the link, it appears darker with black text (as shown on the right).