Beispiel-Navigation mit runden Buttons als Aufzählungszeichen

Mit Bildertausch: die Buttons bzw. die Links werden beim Überfahren mit der Maus ausgetauscht ( ohne JavaScript nur mit CSS )!

Beispiel 1: horizontal

Beispiel 2: vertikal

Anweisung im Html-Dokument (Beispiel 1 + 2)

<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>
</div>

Anweisung im CSS-Style (Beispiel 1 + 2)

.navi a:link, .navi a:active, .navi a:visited       
{ 
display: inline-block; /* Für (Beispiel 2) display: block; */
width: 145px;
margin: 3px 2px;
border: 1px solid #333;
text-decoration: none;
font: 600 16px/50px 'Open Sans', sans-serif;
color: #333;
background: url('images/button-silber.jpg') no-repeat 5px center;
-khtml-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-border-radius: 6px;
}
.navi a:hover       
{ 
color: #888;
border: 1px solid #888;
text-decoration: none;
background: url('images/button-weiss.jpg') no-repeat 5px center; 
}
.navi span      
{ 
margin-left: 55px;
}

Hinweis: Ggf. ist noch für die URL ( = Webadresse der Grafik ) der entsprechende Pfad zu notieren - bei Bedarf siehe über folgende externe Seite!

 zum Download