Rollover buttons were a slick trick in 1997. They added a little flash to a basically static page and provided the visitors with a smattering of visual feedback.
However, even in 1997 they had their problems. It was irksome handcrafting individual button images in place of standard links and doubly so making the rollover duplicates. Loading a mass of images slowed down page render, and even with a preload utility the initial animation could be a little quirky.
More to the point, a couple of things have changed since 1997, most significantly: (1) onscreen font smoothing; and (2) CSS compliant browsers.
<style type='text/css'>
/* --------------------------------- */
/* SOPHIAKNOWS: CSS */
/* --------------------------------- */
/* ROLLOVER BUTTONS */
/* --------------------------------- */
/* Created: 2001-01-01 */
/* Issued: 2001-01-01 */
/* Modified: 2004-08-17 */
/* Component: CSS ROLLOVERS */
/* Copyright (c) 2001-2004 */
/* Tony Pisarra, SophiaKnows */
/* --------------------------------- */
/* --------------------------------- */
// GREY BUTTONS
a.button:link,a.button:visited {
padding:5px;
border-style:solid;
border-width:1px;
border-color:#eee #666 #666 #eee;
background:#ccc;
font-family:Verdana,Geneva,Arial;
font-size:small;
text-decoration:none;
text-align:center;
color:#333;
}
a.button:hover,a.button:active {
padding:5px;
background:#eee;
color:#999;
}
/* 2D TO 3D BUTTON */
a.flatbutton:link,a.flatbutton:visited {
padding:6px;
border-style:solid;
border-width:0px;
border-color:#eee #666 #666 #eee;
background:#ccc;
font-family:Verdana,Geneva,Arial;
font-size:small;
color:#333;
text-decoration:none;
text-align:center;
}
a.flatbutton:hover,a.flatbutton:active {
border-width:1px;
padding:5px;
}
</style>