Submit Button CSS Style

Submit Button CSS Style

Mit Hilfe von CSS können Sie submit, reset, etc. Buttons leicht an Ihr vorhandenes Design anpassen. Hie finden Sie eine kleine Starthilfe zu CSS optimierten Buttons.

Farbiger Hintergund / gestrichelter Rahmen

Button mit Hintergrundfarbe, Text und Rahmen. Passt sich der Textlänge selbstständig an.

HTML Code:

<input type="submit" name="Button1" value="Text" class="button1">

CSS Code:
.button1 {
	padding:0;
	margin:0;
	width:80px;
	font-size:10px;
	border: 1px dashed #B47632;
	background-color: #0000B0;
	color:#FFFFFF;
	}

Farbiger Hintergund / normaler Rahmen

Button mit Hintergrundfarbe, Text und Rahmen. Passt sich der Textlänge selbstständig an.

HTML Code:

<input type="submit" name="Button1" value="Text" class="button2">

CSS Code:
.button2 {
	padding:0;
	margin:0;
	width:80px;
	font-size:10px;
	border: 1px solid #333333;
	background-color: #FF9900;
	color:#000000;
	}

Button mit Hintergrundbild

Button mit Hintergrundbild. Die Hintergrund-Bildbreite passt sich der Textlänge selbständig an.

Grafiken:

bg1

HTML Code:

<input type="submit" name="Button" class="button3" value="Text">

CSS Code:
.button3 {
	padding:0;
	margin:0;
	border:1px solid #D9DDDE; 
	background: url(../css/cssimg/button_bg_1.gif) repeat-x;
	font-size:10px;
	color: #AE0000;
	}

Button mit Bild

Button mit Hintergrundfarbe, Rahmen und Grafik. Die Buttonbreite ist variabel.

Grafiken:

save

stats

downl

HTML Code:

<input class="button4" type="submit" name="save" value=" Speichern">

CSS Code:
.button4 {
	padding:0;
	margin:0;
	border:1px solid #D9DDDE; 
	background-image:url(images/disk.gif); 
	background-repeat:no-repeat;
	font-size:12px;
	background-position: 2px 2px;
	width:100px;
	}

Button mit Hintergrundbild

Button mit Hintergrundbild. Die Hintergrund-Bildbreite ist festgelegt und passt sich dem Text in breite und höhe nicht an.

Grafiken:

bg1

bg1

HTML Code:

<input type="submit" name="Button" class="button7" value="Submit">

CSS Code:
.button7 {
	padding:0;
	margin:0;
	border:none;
	font-size:10px;
	background: url(../images/button_bg_2.gif) no-repeat center;
	color: #AE0000;
	height:19px;
	width:70px;
	/*
	width:110px; < - Breitenangabe für die Längere Version 
	*/
	}

Button mit Hintergrundbild

Button mit Hintergrundbild. Die Hintergrund-Bildbreite ist festgelegt und passt sich dem Text in breite und höhe nicht an.

Grafiken:

bg1

bg1

HTML Code:

<input type="submit" name="Button" class="button9" value="Submit">

CSS Code:
.button9 {
	padding:0;
	margin:0;
	border:none;
	font-size:10px;
	background: url(../images/button_bg_4.gif) no-repeat center;
	color: #AE0000;
	height:20px;
	width:70px;
	/*
	width:110px; < - Breitenangabe für die Längere Version 
	*/
	}

Button mit Transparentem Hintergrundbild

Button mit Transparentem Hintergrundbild. Die Hintergrund-Bildbreite ist festgelegt und passt sich dem Text in breite und höhe nicht an. Die Hintergrundfarbe bleibt durch den Button sichtbar.

Grafiken:

bg1

bg1

HTML Code:

<input type="submit" name="Button" class="button11" value="Submit">

CSS Code:
.button11 {
	padding:0;
	margin:0;
	border:none;
	font-size:10px;
	background: url(../images/button_bg_6.gif) no-repeat center;
	color: #AE0000;
	height:20px;
	width:70px;
	/*
	width:110px; < - Breitenangabe für die Längere Version 
	*/
	}

Mr.Wong

Webnews

Linkarena

Bookmark with Linksilo

Favoriten

Favit

Yigg

Bookmark with Facebook

Digg

Furl

Technorati

Bookmark with Delicious