Beispiel-Navigation mit rechteckig abgerundeten Buttons (horizontal + vertikal)

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

Mit den beiden Grafiken ( Button & Rollover-Button ) konnten die beiden nachfolgenden Menues umgesetzt werden:

Um die beiden Buttons herunterzuladen, navigieren Sie mit der Maus jeweils über diese und wählen mit der rechten Maustaste im Kontextmenü den Befehl "Grafik speichern unter ..."!
Weiter unten über den Download-Link werden Sie auf die Seite geleitet, über welche Sie die Buttons auch in weiteren Farben herunterladen können.

Beispiel 1: (horizontal)

Beispiel 2: (vertikal)

Anweisung im Html-Dokument (Beispiel 1 + 2)

<div class="navi">
<a href="#">Home</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>

Anweisung im CSS-Style (Beispiel 1 + 2)

.navi a:link, .navi a:active, .navi a:visited { 
background: url('images/button.jpg') no-repeat; 
display: inline-block; /* Für (Beispiel 2) display: block; */
width: 125px; 
text-decoration: none; 
font: bold 14px/35px Tahoma, Arial, Verdana;  
letter-spacing: 1pt; 
color: #fff; 
text-align: center; 
}

.navi a:hover { 
background: url('images/button-hover.jpg') no-repeat; 
color: #ccc; 
}

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