Grafische Buttons für Formulare
Von Joachim Krammer | CSS-Praxis
Manchmal kann man stundenlang grübeln und kommt nicht weiter. Danach einfach mal drüber schlafen, wenn es wichtig ist, beschäftigt sich das Gehirn damit in der Nacht - und siehe da, es findet eine Lösung ;)
Bisher wusste ich zwar, dass man Absende-Buttons per HTML als Image einbinden kann, selbiges wollte aber natürlich nicht für Abbrechen- und Durchsuchen-Buttons funktionieren -> aber jetzt hab ich eine Lösung (keine Ahnung, wahrscheinlich bin ich nicht der erste mit dieser Lösung, aber egal):
Hier die benötigten CSS-Definitionen:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
}
.absenden {
background-color: transparent;
background-image: url(absenden.gif);
background-position: center;
background-repeat: no-repeat;
width: 80px;
height: 20px;
font-size: 0px; /* damit nn7 keine ersatzschrift anzeigt */
border: 0px solid white;
}
.abbrechen {
background-color: transparent;
background-image: url(abbrechen.gif);
background-position: center;
background-repeat: no-repeat;
width: 80px;
height: 20px;
font-size: 0px; /* nn7 */
border: 0px solid white;
}
Wichtig dabei ist es, die Values der Buttons mit einem maskierten Leerzeichen zu versehen, da Netscape 7 ansonsten eine “Ersatzbeschriftung” anzeigt!
Standardmäßig zeigen die Browser den Default-Cursor (Pfeil) an. Nachdem die CSS-Definition cursor: hand; nicht spezifiziert und somit nicht valide ist, kann man sich hier - wenn man das will - mit einem grafischen Cursor (*.ico) helfen ;)