Horizontale & vertikale Rollover-Navigation Neon-Glas-Buttons quadratisch abgerundet

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

Mit den beiden Buttons konnten die 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 und Größen 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>
<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.jpg') no-repeat;
display: inline-block; /* Für (Beispiel 2) display: block; */
width: 70px;
margin: 5px;
text-decoration: none;
font: bold 12px/70px Verdana, Arial, Tahoma;
letter-spacing: 1pt;
color: #ccc;
text-align: center;
}
.navi a:hover       
{ 
background: url('images/button-rollover.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