Der perfekte css input image button

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, 3.014 hits)