[HTML+CSS] Dynamische Buttons&Textfelder

CSS Tutorial - Dynamische Buttons&Textfelder

In diesem Texttutorial m�chte ich euch erkl�ren, wie ihr eure Buttons&Textfelder dynamischer gestalten k�nnt.
Damit alles funktioniert solltet ihr folgendes tun:

-Erstellt euch einen neuen Ordner namens "XYZ".Anstatt "XYZ" k�nnt ihr den Ordner auch beliebig anders nennen.Ich habe nur XYZ geschrieben, damit es gleich anschaulicher ist.
-Erstellt eine index.html Datei
-Dann erstellt einen Unterordner namens css.In den Ordner css erstellt ihr wiederum eine styles.css , wo wir dann sp�ter unseren Style einschreiben werden.

Nun haben wir folgendes:

-Hauptordner "XYZ"
-index.html
-Unterordner css indem sich die styles.css befindet

Ich habe jetzt einfach mal eine kleine index.html mit 1x Textfeld und 1x Button erstellt

index.html

Code:

<html>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<form action="index.html" method=POST>
<fieldset>
<fieldset style="width:100px">
Text: <input type="text" name="name" class="label"><br>
<input type="submit" value="klicken" class="button">
</fieldset>
</form>

Wir haben jetzt 2 classes f�r den Style-Sheet erstellt.Einfach label f�r das Textfeld und einmal button f�r den submit-button.

styles.css

Code:

.label {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
}.label:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}.label:active {
	position:relative;
	top:1px;
}

.button {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2e8cff), color-stop(1, #1c5cff) );
	background:-moz-linear-gradient( center top, #2e8cff 5%, #1c5cff 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2e8cff', endColorstr='#1c5cff');
	background-color:#2e8cff;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #ffffff;
	display:inline-block;
	color:#fffaff;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #000000;
}.button:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1c5cff), color-stop(1, #2e8cff) );
	background:-moz-linear-gradient( center top, #1c5cff 5%, #2e8cff 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c5cff', endColorstr='#2e8cff');
	background-color:#1c5cff;
}.button:active {
	position:relative;
	top:1px;
}

Wenn ihr jetzt alles gespeichert habt und die index.html �ffnet solltet ihr sehen, dass das Textfeld und der Button anders aussieht als sonst viel "dynamischer".
Die Farben k�nnt ihr selbstverst�ndlich �ndern.Ich hoffe ich konnte euch mit dieses Tutorial helfen.

Ich w�rde mich sehr �ber euer Feedback und ggf. einem Thanks freuen.

Lg.