Bei einigen Formularen ist es wünschenswert dass man individuell gestaltete grafische Buttons implementieren kann, ohne dass das Code Handling - z.b. mit zusätzlichem Java-Script Code - dabei eingeschränkt wird. Es können mittels einem zusätzlichen Layer im HTML Code, den folgenden CSS Formatierungen sowie zwei simplen Button Grafiken valide Buttons erstellt werden, die von der Länge her noch automatisch angepasst werden. Die beiden Grafiken bestehen aus dem eigentlichen Button ohne den rechten Abschluss und einer Mindestlänge von 300 Pixeln sowie der 2. Grafik mit dem Button-Abschluss welcher nur noch der rechte Strich beinhaltet.
CSS Formatierung:
div.button {
height: 28px;
background: url('images/btn_right.gif') right
no-repeat;
width: auto;
float: left;
padding: 0 3px 0 0;
}
div.button input.button {
height: 28px;
width: auto;
background: url('images/btn_bg.gif') left center
no-repeat;
color: #000;
font-weight: bold;
border: none;
overflow: visible;
display: inline;
margin: 0;
padding: 0 10px 0 22px;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
cursor: pointer;
}
HTML Code:
<div class="button">
<input type="button" name="submit" class="button"
value="Search" />
</div>
Die Breite des Buttons wird automatisch angepasst, abhängig vom Input Value Wert ("Search").
Posts
