Tipps und Tricks: 3D-Button
Helle und dunkle Rahmen erzeugen einen 3D-Effekt. Wenn du diese Rahmen mit :hover einem Link zuweist, hast du den gleichen Effekt, wie Button unter Windows.
,
,
,
,
<html>
<head>
<title>Hyperlinks als Block-Elemente</title>
<style type="text/css">
a.link {
display:block;
width:140px;
padding:5px;
margin:5px;
background-color:#d6d3ce;
border:1px solid #d6d3ce;
text-align:center;
font-weight:bold;
font-size:14px;
}
a.link:hover {
border-left:1px solid #ffffff;
border-top:1px solid #ffffff;
border-right:1px solid #848484;
border-bottom:1px solid #848484;
}
#menu
{
background-color:#d6d3ce;
border:1px solid #000000;
width:160px;
}
</style>
</head>
<body>
<div id="menu">
<a class="link" href="#">Hyperlink 1</a>
<a class="link" href="#">Hyperlink 2</a>
<a class="link" href="#">Hyperlink 3</a>
<a class="link" href="#">Hyperlink 4</a>
<a class="link" href="#">Hyperlink 5</a>
<a class="link" href="#">Hyperlink 6</a>
</div>
</body>
</html>
Dieses Beispiel legt für den class-Selektor
.link diverse Eigenschaften fest, die das Aussehen der Button festlegen.
U.a. werden Hintergrundfarbe,
Rahmenfarbe gleichgesetzt, damit der Rahmen
bereits vorhanden aber nicht zu sehen ist.
a.link:hover definiert die Eigenschaften für den Hover-Effekt des
class-Selektor .link.
Da dies ein 3D-Effekt sein soll, bestimmen
border-left und border-top
den hellen und border-right und border-bottom
den dunklen Rahmen.
Browser
Alle gängigen Browser unterstützen dieses Trick. Die älteren Browser unterstützen lediglich den Hover-Effekt nicht. Du kannst diesen Tipp also problemlos einsetzen.