Beispiel-Menues (horizontal & vertikal) Rollover Glas-Buttons oval neongrün-metallic  

Horizontale & vertikale Beispiel-Rollover-Navigation

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

Mit den beiden Buttons konnten die nachfolgenden Menues umgesetzt werden:

Button Button Rollover

Um die beiden Buttons herunterzuladen, navigiere mit der Maus jeweils über diese und wähle mit der rechten Maustaste im Kontextmenü den Befehl "Grafik speichern unter ..."!
Weiter unten über den Download-Link wirst Du auf die Seite geleitet, über welche Du die Buttons auch in weiteren Farben herunterladen kannst.

Beispiel 1: horizontal

Beispiel 2: vertikal

Anweisung im Html-Dokument (Beispiel 1 + 2)

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

Anweisung im CSS-Style (Beispiel 1 + 2)

.navi { 
background: #000; 
margin: 5px 0 20px 0; 
padding: 10px; 
}
.navi a:link, .navi a:active, .navi a:visited { 
background: url('images/button.png');
font: bold 12px/50px Verdana, Arial, Tahoma;
display: inline-block; /* Für (Beispiel 2) display: block; */
width: 170px;
margin: 5px;
padding-left: 55px;
text-decoration: none;
letter-spacing: 1pt;
color: #333;
}
.navi a:hover { 
background: url('images/button-rollover.png'); 
color: #3366FF;
}

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 


Copyright by homepage-vorlagen-webdesign.de | Impressum | Datenschutz | Nutzungsbedingungen |

zurück