Making FrontPage hover buttons with Cascading Style Sheets

If you don't want to use FrontPage's JavaScript-based hover buttons, here's a way to create them 
using only Cascading Style Sheets (CSS).  Add the following HTML code in the head of your page:


a:link {
background: #9c9;
color: #633;
font-family: arial, helvetica, sans-serif;
text-decoration: none;
font-weight: bold;
font-size: smaller; }

a:active {

background: #633;
color: white;
font-family: arial, helvetica, sans-serif;
text-decoration: none;
font-weight: bold;
font-size: smaller; }

a:visited {

background: #9c9;
color: #633;
font-family: arial, helvetica, sans-serif;
text-decoration: none;
font-weight: bold;
font-size: smaller; }

a:hover {

background: #fc6;
color: #633;
font-family: arial, helvetica, sans-serif;
text-decoration: none;
font-weight: bold;
font-size: smaller; }

You can make your buttons look even better by adding a nonbreaking space-- --before and after the link text:
(View source to see the code.)

The code above will give you green buttons that turn gold while the mouse cursor is hovering over them.

Of course, you can change the fonts, colors, and the class name to suit your taste.
Older browsers just display a normal link.
Some CSS browsers display the button but the color doesn't change.
The best part is that there's never a script error, no matter what browser your reader is using,
and no matter how they've got their options set.

From Ken Collins [ www.KenCollins.com]

Related Topics here:

CSS Reference

More CSS hover buttons

CSS Examples