Horizontale & vertikale Rollover-Navigation Neon-Glas-Buttons

Beispiel-Navigation 1: horizontal

Beispiel-Navigation 2: vertikal

Anweisung in der ausgelagerten CSS-Datei "navi.css" (Beispiel 1)

.navi a:link, .navi a:active, .navi a:visited
{
display: block;
width: 70px;
margin: 5px;
line-height: 70px;
text-decoration: none;
font-family: Verdana, Arial, Tahoma;
font-size: 12px;
letter-spacing: 1pt;
font-weight: bold;
color: #ccc;
text-align: center;
background-image: url('../images/button.jpg')
}
.navi a:hover
{
color: #fff;
background-image: url('../images/button-rollover.jpg')

Anweisung im Html-Dokument (Beispiel 1)

<html>
<head>
<title>horizontale Rollover-Navigation Beispiel 1</title>
<link rel="stylesheet" type="text/css" href="css/navi.css">
</head>
<body>
<table class="navi" cellpadding="0" cellspacing="0">
  <tr>
    <td><a href="#">Home</a></td>
    <td><a href="#">Link 1</a></td>
    <td><a href="#">Link 2</a></td>
    <td><a href="#">Link 3</a></td>
    <td><a href="#">Link 4</a></td>
  </tr>
</table>
</body>
</html>

Anweisung in der ausgelagerten CSS-Datei "navi.css" (Beispiel 2)

.navi_2 a:link, .navi_2 a:active, .navi_2 a:visited
{
display: block;
width: 70px;
margin: 5px;
line-height: 70px;
text-decoration: none;
font-family: Verdana, Arial, Tahoma;
font-size: 12px;
letter-spacing: 1pt;
font-weight: bold;
color: #ccc;
text-align: center;
background-image: url('../images/button.jpg')
}
.navi_2 a:hover
{
color: #fff;
background-image: url('../images/button-rollover.jpg')
}

Anweisung im Html-Dokument (Beispiel 2)

<html>
<head>
<title>horizontale Rollover-Navigation Beispiel 2</title>
<link rel="stylesheet" type="text/css" href="css/navi.css">
</head>
<body>
<div class="navi_2">
 <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>
</body>
</html>

Beispiel incl. CSS-Datei und Grafiken downloaden!