Für den Mous-Over-Effekt benötigst du zwei Button. Einen für den Ruhe-Zustand und den Anderen für den Zustand bei Mous-Over. In meinen Beispielen habe ich einmal die Variante mit fertigen Gif's gewählt, also die Beschriftung ist schon in den Bildern enthalten. Und in der anderen Variante ist es eine separate Beschriftung und ist dadurch noch flexibler einzusetzen und auch schneller in der Übertragung.
Hier eine Vorschau.
Und hier die Button zum Download.
Variante1
Erstelle ein div und die folgenden Regeln.
Code: Alles auswählen
.f-button {
background-image: url(bilder/impressum1.gif);
background-repeat: no-repeat;
display: block;
width: 130px;
height: 40px;
text-decoration: none;
}
Code: Alles auswählen
#button1 {
height: 80px;
}
Code: Alles auswählen
#button1 a:hover {
background-image: url(bilder/impressum2.gif);
background-repeat: no-repeat;
}
Code: Alles auswählen
em {
visibility: hidden;
}
Im Quelltext sieht dein Code so aus:
<div id="button1">Mous-Over-Button mit fertigen Gif's<br><br><em><a
class="f-button" href="#">Impressum</a></em></div>
Richtig aussehen muss er aber so. Ändere ihn entsprechend ab.
<div id="button1">Mous-Over-Button mit fertigen Gif's<br><br><a
class="f-button" href="#"><em>Impressum</em></a></div>
Fertig. Auf zur nächsten Variante.
Variante 2
Erstelle ein div und die folgenden Regeln.
Code: Alles auswählen
.l-button {
display: block;
width: 130px;
height: 40px;
background-image: url(bilder/button.png);
background-repeat: no-repeat;
text-align: center;
line-height: 30px;
text-decoration: none;
color: black;
}
Code: Alles auswählen
#button2 {
height: 80px;
}
Code: Alles auswählen
#button2 a:hover {
background-image: url(bilder/button-hover.png);
background-repeat: no-repeat;
}
über die Text-Einträge der Klasse „.l-button“ . Die hier sind text-align, line-height und color.
Hier noch einmal das Ergebnis.
Viel Spaß beim Nachbau.
