Create Imageless Rollover Buttons For Your Webpage

Create accessible navigation buttons that change colour using this simple CSS technique rather than fancy gif images. To accomplish this effect add this code to your CSS file.

a
{
font-weight: bold;
height: 20px;
text-decoration: none;
color: #000;
padding: 0.5em;
background: #fff;
border-left: 5px solid #000;
}
a:hover
{
background: #000;
color: #fff;
border-left: 5px solid #000;
text-decoration: none;
}

Place your mouse over the sample button to see the effect!

This article can be found at: www.getontheinternet.net/webmaster-tips/css-navigation/index.shtml

[Updated - 29 March 2007]

Copyright © 2007 David Kaye – All rights reserved.
For more free webmaster tips and articles like this on website design, hosting and promotion visit http://www.GetOnTheInternet.net

Link to this article

If you would link to link to this article please copy and paste the following code into your webpage:

<a href="http://www.getontheinternet.net/webmaster-tips/css-navigation" target="_blank">Create Imageless Rollover Buttons For Your Webpage </a>

Click here to read more free website design and hosting hints, tips and advice