First, add this code to your site.. don't worry, after creating CSS rules it will look much better.
<a href="#" id="button">Text</a>
Next, in rollover.css add these CSS declarations to achieve effect, visible below.
#button
{
display: block;
line-height: 50px;
width: 250px;
text-align: center;
text-decoration: none;
color: #FFFFFF;
background-color: #004080;
background-image: url("image_a.png");
background-repeat: no-repeat;
}
#button:hover
Don't forget to link CSS file to your page.
{
text-decoration: underline;
background-color: #3C7CBC;
background-image: url("image_b.png");
background-repeat: no-repeat;
}
<head>
<link rel="stylesheet" href="rollover.css" type="text/css" title="Rollover Effect" />
<head>
Effect (place mouse cursor above it):
TextTry to change CSS rules to achieve different appearance of the Rollover Effect