Oft kommt es vor, dass man für input Buttons ein Hintergrundbild verwenden möchte, da es optisch schöner aussieht. Da der Text eines Buttons jedoch immer unterschiedlich lang sein kann, wäre es mühsam für jeden Button ein extra Bild zu erstellen. Um dies zu vermeiden, hab ich eine simple CSS Lösung kreiert, die in jedem Browser funktioniert.
Das ganze benötigt 2 Zeilen CSS, eine Zeile HTML sowie 2 kleine Hintergrundbilder.
Demo
check out the demo
Tested in: IE6, IE7, Latest Firefox, Opera and Chrome Version
Hier der HTML Code
<div class="button"><input id="login" type="submit" value="login" title="login"/></div>
Hier der CSS Code
<style type="text/css">
div.button {height:23px; background:url(bg_button_right.gif) right no-repeat; width:auto; float:left;}
div.button input {height:23px; background:url(bg_button_left.gif) left no-repeat; color:#ffffff; font-weight:bold; border:none; overflow:visible; display:inline; margin:0px; padding:0px 4px 2px 4px; font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif};
</style>
Download
CSS Button (7,1 KiB, 4.959 hits)
Blue schreibt:
Stimmt geht voll leicht und schaut gut aus….
…glaub ich….
was ist ein Input Button?
Webdawson schreibt:
naja input button…ein submit button ein button zum absenden eines formulares..
< input type="submit" / >usw… erinner dich zurück an frühere SAE Zeiten…producer…Jahr 2003 html basics…des wor der kurs wo wir globolus gespielt haben glaub i..Alex schreibt:
Sieht gut aus, nur erscheint der Button aufgrund des css dann immer links (oder rechts wenn man es umdreht) und lässt sich nur aufwendig über eine Tabelle centern. Oder mache ich etwas falsch?
Webdawson schreibt:
mh ja du kannst ihn links od. rechts floaten lassen…oder mit margin positionieren. Zentrieren wird dann schwierig das stimmt, werd demnächst noch andere lösungen vorstellen…gibt so viele techniken wie man das realisieren kann.
PK schreibt:
Großartig, das war gneau das, was ich gesucht habe, um die richtige Anzeige im IE6 zu erhalten, das overflow:visible hats gebracht 🙂
vielen dank!!!!
Webdawson schreibt:
Gerne! 🙂
jojo schreibt:
bei mir funktionierts net, könnt ihr mir mal sagen wie ich das einfügen muss. übrigens ich benutze nvu.