Homepagebau
Dateiversion:
diesen Beitrag diskutieren,
ergänzen, eine Frage stellen
Menü einblenden
 

Button mit Hovereffekt

 

CSS-Button mit Hovereffekt


Hinweis:
Opera unterstützt die CSS-Anweisung "background-image" für den Tag "input" nicht und kann mit grafischen Buttons daher leider nicht umgehen.

Egal, was sie auch tun: eine Grafik wird niemals ein "echter" Schalter werden und umgekehrt. Was man allerdings tun KANN um aus einem normalen Formular-Schalter ein optisches Schmankerl für jede Navigationsleiste zu machen, zeigen wir ihnen ...

Das Problem:

Zum einen ist es einfach nur lästig, jeweils neue Buttons für jeden Eintrag designen zu müssen. Zum anderen sammeln sich nach einer Weile so viele Dateien an, dass die Seite sich nur noch quälend langsam aufbaut.

Wünschenswert wäre es also, 1 (!) Datei für alle Schalter zu haben und die Beschriftung als reinen Text einfach im HTML angeben zu können.

Wie geht das?

So wird's gemacht!

Wir verwenden globale Stylesheets um das Problem bequem zu umgehen.

Verwendung gobaler Stylesheets:

Sollten sie noch kein solches Stylesheet einsetzen, legen sie zunächst eine neue Datei mit der Endung "css" an. Um diese Datei später in ihre HTML-Seiten zu importieren, kopieren sie bitte den folgenden Quellcode in jede Datei ihres Webs. Das ist zunächst etwas aufwendig - da es aber nur ein einziges Mal erforderlich sein wird, sicher vertretbar.

<HEAD>
  <link rel="stylesheet" type="text/css" href="myStylesheet.css">
</HEAD>

Ersetzen sie dabei "myStylesheet.css" durch den Namen der von ihnen erstellten Datei.

Als nächstes werden wir den Quellcode der CSS-Datei erläutern.

Zuerst kümmern wir uns um das Wesentliche - den Button.
Unser Button besteht aus einem "INPUT"-Tag.
 
Um "unsere" Buttons von normalen Formularschaltern unterscheiden zu können,
vergeben wir eine CSS-Klasse "BUTTON" -gekennzeichnet durch einen Punkt (".") vor dem Klassennamen.

INPUT.BUTTON {

"background-image" = Hintergrundbild (URL der Datei: z.Bsp. 'button.gif')
"background-color" wird auf den Wert "transparent" gesetzt, damit transparente Gifs verwendet werden können
Die Anweisungen "width" (= Breite) und "height" (= Höhe) geben die Größe des Buttons in Pixel an.

background-image: url('button.gif');
background-color: transparent;
width: 200px;
height: 45px;

Die Standardschriftart für Schaltflächen ist ein Systemfont, der kein True-Type Font und somit nicht skalierbar ist. Das heißt: bei Schriftgrößen ab 12pt wird es pixelig. Daher ersetzen wir diese durch "font-family" mit einer eigenen.

font-family: 'Times New Roman', serif;

Jetzt schalten wir den Rand um die Schaltfläche aus.
Dazu benutzen wir die Anweisung "border-width", welche die Breite des Rahmens festlegt.
In diesem Fall setzen wir die Breite auf 0 - was gleichbedeutend ist mit "kein Rahmen".

border-width: 0
}

Jetzt kommen die Hover-Effekte - dass heißt, wir ergänzen all das, was sich ändern soll,
wenn der Besucher mit der Maus auf den Button zeigt.

A:HOVER INPUT.BUTTON {

Z.Bsp. kann man ein neues "background-image" angeben - das heißt, es wird, bei Berührung mit der Maus ein anderes Bild angezeigt.
 
Natürlich kann man auch andere Dinge probieren - beispielsweise via "color" die Textfarbe verändern ... der Fantasie sind hier kaum Grenzen gesetzt.

background-image: url('hover.gif');
color: whitesmoke
}

Abschließend noch eine Ergänzung für den Netscape Navigator.

Erläuterung:
Ausnahmsweise macht es der Navigator in diesem Fall richtig - der Internet Explorer aber falsch. Netscape reagiert auf einen Hyperlink der eine Schaltfläche umschließt korrekt und öffnet bei Klick die angegebene URL. Nicht so der Internet Explorer, der den Hyperlink einfach ignoriert. Dieser "Link" wird aber im Navigator unterstrichen dargestellt - weil das für Buttons nicht üblich ist, unterbinden wir das.

A.BUTTON {

Mit "text-decoration" kann u.a. festgelegt werden, ob ein Text unter- (underline), über- (overline),
unter- und überstrichen (underline + overline) oder ohne Formatierung (none) dargestellt werden soll.

text-decoration: none
}

Der Lohn der Mühe

Ab sofort können sie im HTML-Quellcode einen Button wie folgt beschreiben:

<A CLASS="BUTTON" ...><INPUT TYPE="BUTTON" CLASS="BUTTON" VALUE="Beschriftung"></A>

Nebeneffekt: die Grafiken dieser Buttons lassen sich nicht mehr per Rechtsklick speichern.

Beispiel:

   

Ergänzung:

Um einen solchen Button zu verlinken, genügt es eine einfache Anweisung in JavaScript zu ergänzen.

<A CLASS="BUTTON" HREF="URL">
<INPUT TYPE="BUTTON" CLASS="BUTTON" onClick="window.open('URL', '_self')" VALUE="Beschriftung">
</A>

Wenn ein bestimmter Frame das Ziel ist verändert sich diese Anweisung nur geringfügig.

<A CLASS="BUTTON" TARGET="FRAME" HREF="URL">
<INPUT TYPE="BUTTON" CLASS="BUTTON" onClick="window.open('URL', 'FRAME')" VALUE="Beschriftung">
</A>