Je hebt het al gezien, de links gestyld met afbeeldingen die veranderen als je er met de muis over uit gaat (hover).
Het meerdere deel van deze effecten wordt met JavaScript gerealiseerd, en ook is het (als er veel links zijn) nodig om de afbeeldingen te preloaden.
Deze tutorial leert je een techniek waarbij er geen JavaScript en/of preload aan te pas komt.

Download afbeelding

buttonex.jpg (60)

HTML

<div id="menu">
<a href="#">link #1</a>
<a href="#">link #2</a>
<a href="#">link #3</a>
<a href="#">link #4</a>
<a href="#">link #5</a>
</div>

CSS

#menu a
{
display:block;
width:120px;
margin: 1em 0;
padding:7px 0 10px 20px;
font: bold 14px sans-serif;
color:#BE670A;
background: url("buttonex.jpg") 0 0 no-repeat;
text-decoration: none;
}
#menu a:hover
{
background-position: -157px 0;
/*verschuiving 157px links*/
color: #F28F27;
}
#menu a:active
{
background-position: -314px 0;
/*verschuiving 2x 157px links*/
color:white;
}