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.948 hits)

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

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

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

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

Sag mir was du denkst

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>