Beispiel-Navigation mit runden Buttons als Aufzählungszeichen

... zusätzlich mit Bildertausch: die Buttons bzw. die Links werden beim Überfahren
mit der Maus ausgetauscht - selbstverständlich ohne Javascript (nur mit CSS)!

Home Link 1 Link 2 Link 3 Link 4

Anweisung in der CSS-Datei "navi.css"

.navi a:link, .navi a:active, .navi a:visited
{
display: block;
width: 160px;
margin-bottom: 3px;
line-height: 50px;
border: 1px solid #333;
text-decoration: none;
font-size: 20px;
letter-spacing: 1pt;
color: #333;
background-image: url('../images/button-silber.jpg');
background-repeat: no-repeat;
background-position: 5px center
}
.navi a:hover
{
color: #666;
text-decoration: none;
background-image: url('../images/button-weiss.jpg')
}
.navi span
{
margin-left: 55px
}

Anweisung im Html-Dokument

<html>
<head>
<title>Beispiel-Navigation mit runden Buttons als Aufzählungszeichen</title>
<link rel="stylesheet" type="text/css" href="css/navi.css">
</head>
<body>
<div class="navi">
<a href="#"><span>Home</span></a>
<a href="#"><span>Link 1</span></a>
<a href="#"><span>Link 2</span></a>
<a href="#"><span>Link 3</span></a>
<a href="#"><span>Link 4</span></a>
</div>
</body>
</html>

Beispiel incl. CSS-Datei und Grafiken downloaden!