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. ...

Get HTML, XHTML, & CSS, Sixth Edition: Visual QuickStart Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.