|
Linkleiste mit Buttoneffekt per CSS
Hier wird eine Linkleiste per CSS erzeugt (...die Links sind nicht aktiv...)
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; }
|