¿Cómo puedo aplicar CSS en todos los botones que están presentes en esa página?

Question

He creado una clase de estilo CSS:

.btn { 
    color:#050; 
    font: bold 84% 'trebuchet ms',helvetica,sans-serif; 
    background-color:#fed; 
    border:1px solid; 
    border-color: #696 #363 #363 #696; 
} 

¿Cómo puedo aplicar esta clase de estilo CSS a todos los botones que están presentes en la página sin añadir class="btn" a todos los botones?

Answer 1

button{ 
    color:#050; 
    font: bold 84% 'trebuchet ms',helvetica,sans-serif; 
    background-color:#fed; 
    border:1px solid; 
    border-color: #696 #363 #363 #696; 
} 

O

input[type="button"]{ 
    color:#050; 
    font: bold 84% 'trebuchet ms',helvetica,sans-serif; 
    background-color:#fed; 
    border:1px solid; 
    border-color: #696 #363 #363 #696; 
} 

Answer 2

Si los botones son <input type="button"> o se someten, entonces esto debe hacerlo:

input[type="button"], input[type="submit"] { 
    color:#050; 
    font: bold 84% 'trebuchet ms',helvetica,sans-serif; 
    background-color:#fed; 
    border:1px solid; 
    border-color: #696 #363 #363 #696; 
} 

De lo contrario, si los botones son <button>:

button { 
    color:#050; 
    font: old 84% 'trebuchet ms',helvetica,sans-serif; 
    background-color:#fed; 
    border:1px solid; 
    border-color: #696 #363 #363 #696; 
} 

a agarrar los tres tipos de botones:

button, input[type="button"], input[type="submit"] { 
    color:#050; 
    font: bold 84% 'trebuchet ms',helvetica,sans-serif; 
    background-color:#fed; 
    border:1px solid; 
    border-color: #696 #363 #363 #696; 
} 

Answer 3

input[type=submit], input[type=button], button { 
    ... 
} 

Answer 4

sólo una nota

input[type="button"] 

no va a trabajar en los navegadores antiguos como IE6. Si eso es un problema, lamentablemente deberá agregar su clase a cada elemento.

Answer 5

Si no desea establecer explícitamente todos los estilos, pero desea usar los estilos ya definidos en alguna clase preexistente (por ejemplo, la clase bootstrap btn-default), podría hacer algo como esto:

<script> 
$("button").addClass("btn-default"); 
</script> 

En mi caso esto era lo que estaba buscando, aunque estoy seguro de que hay algún tipo de advertencia sobre hacerlo de esta manera, o esperaría que fuera algo factible directamente desde CSS.