Tipps und Tricks: Hyperlinks in Buttonform
Hyperlinks müssen nicht immer die blauen, unterstrichenen Texte oder Grafiken sein. Mit Stylesheets lässt Du sie wie Buttons aussehen.
,
,
,
,
<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:
- border-top: Legt die Eigenschaften des oberen Rahmen fest.
- border-bottom: Legt die Eigenschaften des unteren Rahmen fest.
- border-left: Legt die Eigenschaften des linken Rahmen fest.
- border-right: Legt die Eigenschaften des rechten Rahmen fest.
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.