Horizontale Mouseover-Menues Navigation mit runden Glas-Buttons Glossy Neon auf schwarzem Hintergrund

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

Mit den folgenden Grafiken ( runde Buttons ) konnten die nachfolgenden Menues umgesetzt werden:

Um die drei 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:

Beispiel 2:

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>
<a href="#">Link 4</a>
</div>

Anweisung im CSS-Style (Beispiel 1 + 2)

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

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