¿Cómo diseñar el botón de entrada y envío con CSS?

Estoy aprendiendo CSS. ¿Cómo diseñar el botón de entrada y envío con CSS?

Estoy tratando de crear algo como esto pero no tengo idea de cómo hacerlo

<form action="#" method="post">
    Name <input type="text" placeholder="First name"/>
    <input type="text" placeholder="Last name"/>
    Email <input type="text"/>
    Message <input type="textarea"/>
    <input type="submit" value="Send"/>
</form>

http://jsfiddle.net/vfUvZ/

Aquí hay un punto de partida

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; 
}

Simplemente diseñe su botón Enviar como lo haría con cualquier otro elemento html. puede apuntar a diferentes tipos de elementos de entrada usando el selector de atributos CSS

Como ejemplo podrías escribir

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

Combinar con otros selectores

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

Aquí hay un ejemplo de trabajo

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; 
}

Sugeriría en lugar de usar

<input type='submit'>

utilizar

<button type='submit'>

Button se introdujo específicamente teniendo en cuenta el estilo CSS. Ahora puede agregarle la imagen de fondo degradado o aplicarle estilo con gradientes CSS3.

Lea más sobre la estructura de formularios HTML5 aquí

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

¡Salud! .Pav

Para mayor confiabilidad, sugeriría dar nombres de clase, o ids a los elementos para diseñar (idealmente classpara las entradas de texto, ya que presumiblemente habrá varios) y un idbotón para enviar (aunque a classtambién funcionaría):

<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>

Con el CSS:

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

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

Para navegadores más actualizados, puede seleccionar por atributos (usando el mismo HTML):

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

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

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

También podría usar simplemente los combinadores de hermanos (ya que las entradas de texto al estilo parecen seguir siempre un labelelemento, y el envío sigue un área de texto (pero esto es bastante frágil)):

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 */
}

la interfaz de usuario del elemento de formulario está algo controlada por el navegador y el sistema operativo, por lo que no es trivial diseñarlos de manera muy confiable de una manera que se vea igual en todas las combinaciones comunes de navegador / sistema operativo.

En cambio, si desea algo específico, recomendaría usar una biblioteca que le proporcione elementos de formulario con estilo. uniform.js es una de esas bibliotecas.

Al diseñar un tipo de entrada enviar use el siguiente código.

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

En realidad, esto también funciona muy bien.

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;
             }

Lo hice de esta manera en base a las respuestas dadas aquí, espero que ayude

.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>

Estilo CSS

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;
}

Muy simple:

<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>

Esto está funcionando lo he probado.