Hier bist Du: Home « Tipps und Tricks « Hyperlinks in Buttonform

Tipps und Tricks: Hyperlinks in Buttonform

Beispiel

Hyperlinks müssen nicht immer die blauen, unterstrichenen Texte oder Grafiken sein. Mit Stylesheets lässt Du sie wie Buttons aussehen.

Internet Explorer 5.x, Netscape 6.x, Opera 5, Mozilla 1.0, Mozilla Firefox 0.8
<html><head>
<style type="text/css">
a.b:link, a.b:visited, a.b:hover, a.b:active
{
 font-family:Arial;
 font-size:14px;
 text-align:center;
 text-Decoration: none;
 width:100px;
 height:20px;
 padding:3px;
}
a.b:link, a.b:visited
{
 color:#000000;
 background-color:#bcbcbc;
 border-left:2px solid #efefef;
 border-top:2px solid #efefef;
 border-right:2px solid #000000;
 border-bottom:2px solid #000000;
}
a.b:hover, a.b:active
{
 color:#ffffff;
 background-color:#5555aa;
 border-left:2px solid #efefff;
 border-top:2px solid #efefff;
 border-right:2px solid #000055;
 border-bottom:2px solid #000055;
}
</style>
<title>Hyperlinks in Buttonform</title>
</head><body>
<h1>Hyperlinks in Buttonform</h1>

<a class="b" href="test.htm">Linktext 5</a>
</body>
</html>

Im Stylesheet-Bereich wird eine Klasse für Hyperlinks definiert, damit die Buttonform nicht für alle Hyperlinks verwendet wird. Das class-Attribut trägst Du dann in die <a>-Tags ein, auf die die Formatierung angewendet werden soll.
Um einen 3D-Button darzustellen, benötigst Du zwei helle und zwei dunkle Rahmen. Dies kannst Du mit den folgenden Rahmeneigenschaften realisieren:

Wählst Du für den oberen und linken Rahmen eine helle Farbe und für den unteren und rechten eine dunkle, so hast Du bereits einen 3D-Effekt. Dann solltest Du noch die Hintergrund- und Schriftfarbe definieren, das wä's.

Browser

Browser, die diese Technik nicht kennen, ignorieren die Formatierungen oder stellen den Button nicht korrekt dar.
Du solltest also auf jeden Fall mit den gängigen Browsern testen.