Effekte mit Cascading Style Sheets

Hover-Buttons, als Buttons, die ihre Farbe beim Überfahren mit der Maus ändern, werden im Internet immer mehr genutzt. Für diesen Effekt sind nicht zwei Bilder notwendig, realisiert wird das Ganze lediglich über Cascading Style Sheets. Dargestellt wird dies jedoch nur vom Internet Explorer ab Version 4.x, bei Netscape Browsern passiert nichts, es kommt aber auch nicht zu Fehlermeldungen.

Es gibt verschiedene Möglichkeiten der Darstellung eines Links:

Link ohne normale Linkunterstreichung

<style type="text/css">
a {text-decoration:none;}
</style>

Änderung der Linkfarbe beim Überfahren mit der Maus:

<style type="text/css">
a:hover {color:red;}
</style>

Linküberstrich mit beim Überfahren mit der Maus:

<style type="text/css">
a:hover {text-decoration: overline }
</style>

Linkunterstrich mit beim Überfahren mit der Maus:

<style type="text/css">
a:hover {text-decoration: underline }
</style>

Letztendlich lassen sich die einzelnen Cascading Style Sheets zusammenpacken, beispielsweise für einen nichtunterstrichenen Link (Schrift: Verdana) der beim überfahren mit der Maus seine Farbe ändert und einen Über-und Unterstrich zeigt :

<style type="text/css">
a {font-family:Verdana,Helvetica,Arial,sans-serif;text-decoration:none;}
a:hover {color:red;}
a:hover {text-decoration: overline }
a:hover {text-decoration: underline }
</style>

Zur Erstellung des Quellcodes für diese Buttons kann man auch Hover-Maker nutzen.