CSS: Schönere Formular-Buttons

Mit den CSS Style Sheet Befehlen oder auch Grafiken lassen sich langweilige Absende-Buttons in HTML Formularen etwas aufpeppen und an das Gesamt-Design der Website anpassen. Neben den Buttons lassen sich aber auch die Eingabefelder eines Formulars verschönern!

Standardbutton:

<input type="submit" value="Absenden">

Mit zusätzlicher Grafik:

<input type="submit" value="  Absenden" 
style="background-image:url(fragezeichen.gif); 
background-repeat: no-repeat; 
background-position: 3px 2px;">

Mit (transparentem) Hintergrundbild:

<input type="submit" value=" Absenden " 
style="background-image:url(button_hgr.gif);">

Grafik als Button:

<input type="image" SRC="los.gif" BORDER=0>

Button mit eigenem Rand:

<input type="submit" value="Absenden" 
style="border: 1px solid black;">

Button mit eigenen Farben:

<input type="submit" value="Absenden" 
style="border: 1px solid black; 
background-color: #8888FF; color: #FFFFFF;">

Anderer Rand, andere Schrift:

<input type="submit" value="Absenden" 
style="border: 1px dotted black; 
background-color: #8888FF; color: #FFFFFF; 
font-family: times">

Durchsichtig mit eigenem 3D Effekt:

<input type="submit" value="Absenden" 
style="border-top: 1px solid white; border-left: 
1px solid white; border-right: 1px solid black; 
border-bottom: 1px solid black; 
background: transparent;">

Oder eingedrückt: