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

zip  CSS Button (7,1 KiB, 3.456 hits)


7 Kommentare

  1. Blue 26. November 2008 um 14:45

    Stimmt geht voll leicht und schaut gut aus....

    ...glaub ich....

    was ist ein Input Button?

  2. Webdawson 26. November 2008 um 15:08

    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..

  3. Alex 7. Januar 2009 um 20:02

    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?

  4. Webdawson 7. Januar 2009 um 20:22

    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.

  5. PK 10. März 2009 um 9:52

    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!!!!

  6. Webdawson 10. März 2009 um 10:10

    Gerne! :)

  7. jojo 6. Dezember 2011 um 11:19

    bei mir funktionierts net, könnt ihr mir mal sagen wie ich das einfügen muss. übrigens ich benutze nvu.

Kommentar verfassen


 
Produced and © by Koller Jürgen | Impressum | Love and Joy to everyone