Tutorial 5 - Floating next and back buttons using lists

Step 12 - Add a hover state

Use the "a:hover" state to set a second background color as a rollover state. If you roll over the list now you will see that the rollover works.

Go to all steps combined →

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


CSS CODE
ul#navigation
{
list-style-type: none;
margin: 0;
padding: .5em 0;
border-top: 1px solid #666;
}

ul#navigation li a
{
display: block;
width: 5em;
color: #FFF;
background-color: #036;
padding: .2em 0;
text-align: center;
text-decoration: none;
}

ul#navigation li a:hover
{
color: #FFF;
background-color: #69C;
}

ul#navigation .left { float: left; }
ul#navigation .right { float: right; }

HTML CODE
<p>
Lorem ipsum dolor sit amet...
</p>
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul>
Comments form
Other Max Design articles and presentations
Associated with webstandardsgroup.org