Wie stelle ich die Eingabe ein und sende den Button mit CSS?

http://jsfiddle.net/vfUvZ/

Hier ist ein Ausgangspunkt

CSS:

input[type=text] {
    padding:5px; 
    border:2px solid #ccc; 
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

input[type=text]:focus {
    border-color:#333;
}

input[type=submit] {
    padding:5px 15px; 
    background:#ccc; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
}

Gestalten Sie einfach Ihre Senden-Schaltfläche so, als würden Sie jedes andere HTML-Element gestalten. Sie können verschiedene Arten von Eingabeelementen mit dem CSS-Attributselektor anvisieren.

Als Beispiel könnte man schreiben 

input[type=text] {
   /*your styles here.....*/
}
input[type=submit] {
   /*your styles here.....*/
}
textarea{
   /*your styles here.....*/
}

Kombinieren mit anderen Selektoren

input[type=text]:hover {
   /*your styles here.....*/
}
input[type=submit] > p {
   /*your styles here.....*/
}
....

Hier ist ein Arbeits Beispiel

HTML

<input type="submit" name="submit" value="Send" id="submit" />

CSS

#submit {
 color: #fff;
 font-size: 0;
 width: 135px;
 height: 60px;
 border: none;
 margin: 0;
 padding: 0;
 background: #0c0 url(image) 0 0 no-repeat; 
}

Ich würde vorschlagen, anstatt zu verwenden

<input type='submit'>

benutzen 

<button type='submit'>

Button wurde speziell für das CSS-Styling eingeführt. Sie können jetzt das Hintergrundbild mit Farbverlauf hinzufügen oder es mit CSS3-Farbverläufen gestalten. 

Weitere Informationen zur HTML5-Formularstruktur finden Sie hier

http://www.w3.org/TR/2011/WD-html5-20110525/forms.html

Prost! . Pav

die Benutzeroberfläche des Formularelements wird in gewisser Weise von Browser und Betriebssystem gesteuert. Daher ist es nicht einfach, sie sehr zuverlässig so zu gestalten, dass sie in allen gängigen Browser/Betriebssystem-Kombinationen gleich aussehen.

Wenn Sie jedoch etwas Bestimmtes wünschen, würde ich empfehlen, eine Bibliothek zu verwenden, die Ihnen formbare Formularelemente zur Verfügung stellt. uniform.js ist eine solche Bibliothek.

Aus Gründen der Zuverlässigkeit würde ich vorschlagen, den Elementen einen Klassennamen oder ids zu geben (idealerweise eine class für die Texteingaben, da vermutlich mehrere vorhanden sind) und eine id für den Submit-Button (obwohl eine class auch funktionieren würde ):

<form action="#" method="post">
    <label for="text1">Text 1</label>
    <input type="text" class="textInput" id="text1" />
    <label for="text2">Text 2</label>
    <input type="text" class="textInput" id="text2" />
    <input id="submitBtn" type="submit" />
</form>

Mit dem CSS:

.textInput {
    /* styles the text input elements with this class */
}

#submitBtn {
    /* styles the submit button */
}

Bei aktuelleren Browsern können Sie nach Attributen (mit demselben HTML-Code) auswählen:

.input {
    /* styles all input elements */
}

.input[type="text"] {
     /* styles all inputs with type 'text' */
}

.input[type="submit"] {
     /* styles all inputs with type 'submit' */
}

Sie können auch gleich Geschwister-Kombinatoren verwenden (da die Texteingaben für den Stil anscheinend immer einem label-Element folgen und das Submit einem Textbereich folgt (dies ist jedoch ziemlich fragil)):

label + input,
label + textarea {
    /* styles input, and textarea, elements that follow a label */
}

input + input,
textarea + input {
    /* would style the submit-button in the above HTML */
}

Wenn Sie einen Eingabetyp gestalten, verwenden Sie den folgenden Code.

   input[type=submit] {
    background-color: pink; //Example stlying
    }

Eigentlich funktioniert das auch super.

input[type=submit]{
                 width: 15px;
                 position: absolute;
                 right: 20px;
                 bottom: 20px;
                 background: #09c;
                 color: #fff;
                 font-family: tahoma,geneva,algerian;
                 height: 30px;
                 -webkit-border-radius: 15px;
                 -moz-border-radius: 15px;
                 border-radius: 15px;
                 border: 1px solid #999;
             }

Ich habe es anhand der hier gegebenen Antworten so gemacht, ich hoffe, es hilft

.likeLink {
    background: none !important;
    color: #3387c4;
    border: none;
    padding: 0 !important;
    font: inherit;
    cursor: pointer;
}
    .likeLink:hover {
        background: none !important;
        color: #25618c;
        border: none;
        padding: 0 !important;
        font: inherit;
        cursor: pointer;
        text-decoration: underline;
    }

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Button</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<a href="#" class="btn">Push</a>
</div>
</body>
</html>

CSS-Styling

a.btn {
display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;

background: #398525; /* old browsers */
background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */

box-shadow: inset 0px 0px 6px #fff;
-webkit-box-shadow: inset 0px 0px 6px #fff;
border: 1px solid #5ea617;
border-radius: 10px;
}

Sehr einfach: 

<html>
<head>
<head>
<style type="text/css">
.buttonstyle 
{ 
background: black; 
background-position: 0px -401px; 
border: solid 1px #000000; 
color: #ffffff;
height: 21px;
margin-top: -1px;
padding-bottom: 2px;
}
.buttonstyle:hover {background: white;background-position: 0px -501px;color: #000000; }
</style>
</head>
<body>
<form>
<input class="buttonstyle" type="submit" name="submit" Value="Add Items"/>
</form>
</body>
</html>

Das funktioniert, habe ich getestet.