Estructura form en .CSS?

[welchu]

Hola,

Mi problema es que tengo en mi código .CSS lo siguiente para la estructura <form>:

Código [Seleccionar] Expandir

form, .content {
   font-family: Arial, Helvetica, sans-serif; /*Not yet a member? Sign up*/
   width: 30%;
   margin: 0px auto;
   padding: 20px;
   border: 1px solid #595959; /*Border register*/
   background: white;
   /*border-radius: 0px 0px 10px 10px;*/
}

Pero me gustaría que fuese diferente para el botón que tengo:

Código [Seleccionar] Expandir

<form action="#" method="post">
   <input type="hidden" id="hiddenfield" name="hiddenfield">
   <button class="button" name="search">Search</button>
</form>

Que lo quiero con estas características:

Código [Seleccionar] Expandir

.button {
   display: block;
   margin: auto;
   border: none;
   color: black;
   padding: 8px 40px;
   text-align: center;
   text-decoration: none;
   font-size: 16px;
   cursor: pointer;
}

button:hover {
   background:#333333;
   color: white;
}

Sin embargo, el .CSS de la estructura <form> también se aplica para el botón. Me gustaría diferenciarlo, pero no se como. He probado de varias maneras, entre ellas esta:

Código [Seleccionar] Expandir

form, .button {
   display: block;
   margin: auto;
   border: none;
   color: black;
   padding: 8px 40px;
   text-align: center;
   text-decoration: none;
   font-size: 16px;
   cursor: pointer;
}

y he probado a poner

Código [Seleccionar] Expandir

style="border:none" al botón pero no consigo quitar el borde.

Me podríais ayudar?
Gracias

[srWhiteSkull]

Prueba:

Código [Seleccionar] Expandir


form > button {

}