Linkleiste mit Buttoneffekt per CSS

Hier wird eine Linkleiste per CSS erzeugt (...die Links sind nicht aktiv...)


Download
Bestellseite
Kontakt
Information


Sourcecode der obigen Tabelle:

<table border="0" cellpadding="0">
  <tr><td>
  <hr width="100px" align="left">
  <a class="mystyle" href="#">Download</a>
  <hr width="100px" align="left">
  <a class="mystyle" href="#">Bestellseite</a>
  <hr width="100px" align="left">
  <a class="mystyle" href="#">Kontakt</a>
  <hr width="100px" align="left">
  <a class="mystyle" href="#">Information</a>
  <hr width="100px" align="left">
  </td></tr>
</table>

Sourcecode der Stylesheet-Datei "style.css":

a.mystyle { width: 100px; }

a.mystyle:link {
   color : black;
   font-family: Verdana; 
   text-decoration: none; 
   padding-right : 16px;
   padding-left : 6px;
   padding-top : 4px;
   padding-bottom : 4px;
   border : 1px solid white; }

a.mystyle:visited {
   color : black;
   font-family: Verdana; 
   text-decoration: none;
   padding-right : 16px;
   padding-left : 6px;
   padding-top : 4px;
   padding-bottom : 4px;
   border : 1px solid white; }

a.mystyle:hover {
   color: white;
   font-family: Verdana; 
   font-weight : bold;
   text-decoration: none;
   background-color : navy;
   padding-right : 16px;
   padding-left : 6px;
   padding-top : 4px;
   padding-bottom : 4px;
   border-bottom : 1px solid black;
   border-right : 1px solid black;
   border-top : 1px solid silver;	 		
   border-left : 1px solid silver; }

a.mystyle:active {
   color: red;
   text-decoration: none; }
 Ranking-Hits zurück Sitemap
Designed by www.wbrnet.info