Links mit CSS wie professionelle Buttons aussehen lassen - CSS

Links mit CSS wie professionelle Buttons aussehen lassen.

Ein Navigationsmenü nur mit Hyperlinks erstellen und diese Links trotzdem wie professionelle Buttons aussehen lassen? Kein Problem mit ein bisschen CSS, denn solcherart aufgepeppte Hyperlinks präsentieren sich optisch so elegant wie mit Hilfe von Java Script wechselnde Button-Images. Dass das noch ressourcensparender ist und auch dann funktioniert, wenn der Besucher Java Script deaktiviert hat, kommt als Vorteil mit dazu. Und noch was: Viele Besucher reagieren meist erstaunt, wie schnell diese "Link-Buttons" ihr Aussehen beim Überfahren mit der Maus verändern und spielen daher gleich noch ein bisschen damit rum ...
Nun, wie wird's gemacht? CSS bietet die Möglichkeit, Hyperlinks als Block-Level-Elemente zu formatieren und ihnen zusätzliche Eigenschaften z.B. beim Überfahren mit dem Mauszeiger zuzuweisen. Die Links sind beispielsweise in einem DIV-Container (der ja eines der HTML-Blockelemente ist) platziert. Diesem Blockelement wird mittels CSS entsprechende Eigenschaften für das a Tag zugewiesen, so dass jeder Link innerhalb des Containers automatisch als 'Button' dargestellt wird.
Damit die Zuweisung der CSS-Eigenschaften einfach erfolgen kann, werden zuerst die entsprechenden Klassen gebildet:

            
            
              
                
                  
                    Code:
                  
                

                  
                   	< STYLE type=text/css >
DIV.linkbutton a
{ 
TEXT-DECORATION: none;
DISPLAY: block; 
WIDTH: 160px; 
BORDER: 1px solid #3366ff;
PADDING: 3px; 
MARGIN: 1px;
FONT-FAMILY: verdana, arial, helvetica;
FONT-SIZE: 14px;
FONT-WEIGHT: bold;
TEXT-ALIGN: center;
COLOR: #FFFFFF;
BACKGROUND-COLOR: #3366ff;
}
DIV.linkbutton a:hover 
{
COLOR: #3366ff; 
BACKGROUND-COLOR: #FFFFFF;
}
< /STYLE >
                  
                

              
            
          

Mit DIV.linkbutton a wird die Basiseigenschaft festgelgt. So wie hier definiert präsentiert sich der "Link-Button" im Normalzustand. Fährt der Besucher mit dem Mauszeiger über diesen "Button", verändert er sein Aussehen entsprechend der Definition DIV.linkbutton a:hoover.
Dem DIV-Container werden nun die Eigenschaften ganz einfach mittels der vorher definierten CSS-Klasse linkbuttons zugewiesen:
< div class="linkbutton" > </div>

Wer sehen will, wie solche CSS-Link-Buttons in der Praxis aussehen, kann das auf meiner Site http://www.nak-badragaz.ch im Navigationsmenü sowie auf der Sitemap tun. In meinem Fall habe ich die CSS-Klasse anstatt für ein DIV-Element einfach für eine Tabelle geschrieben:

            
                    Code:
                  
                   	table.menu a {
  hier stehen die Eigenschaften
}

table.menu a:link {
  hier stehen die Eigenschaften
}

table.menu a:visited {
  hier stehen die Eigenschaften
}

table.menu a:hover {
  hier stehen die Eigenschaften
}

table.menu TD.down a:link {
  hier stehen die Eigenschaften
}

table.menu TD.down a:visited {
  hier stehen die Eigenschaften
}

table.menu TD.down a:hover {
  hier stehen die Eigenschaften
}

Die Zuweisung erfolgt dann einfach nur einmal im Kopf der Tabelle wie folgt:
<TABLE class="menu">

Viel Vergnügen!
remuen

Danke Remuen für dein Tutorial!