Etiqueta HTML <button>
Ejemplo
Un botón en el que se puede hacer clic está marcado de la siguiente manera:
<button type="button">¡Haz clic en mí!</button>
Try it Yourself »
Más ejemplos de "Try it Yourself" ("Pruébelo usted mismo") a continuación.
Definición y uso
La etiqueta <button> define un botón en el que se puede hacer clic.
Dentro de un elemento <button> puedes poner texto (y etiquetas como <i>, <b>, <strong>, <br>, <img>, etc.). ¡Eso no es posible con un botón creado con el elemento <input>!
Consejo: Especifique siempre el atributo type para un elemento <button> para indicar a los navegadores qué tipo de botón que es.
Consejo: ¡Puedes diseñar botones fácilmente con CSS! Mire los ejemplos a continuación o visite nuestro tutorial Botones CSS.
Soporte del navegador
| Elemento | |||||
|---|---|---|---|---|---|
| <button> | Sí | Sí | Sí | Sí | Sí |
Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| autofocus | autofocus | Especifica que un botón debe recibir foco automáticamente cuando se carga la página |
| disabled | disabled | Especifica que un botón debe estar deshabilitado |
| form | form_id | Especifica a qué formulario pertenece el botón |
| formaction | URL | Especifique dónde enviar los datos del formulario cuando se envía un formulario. Sólo para type="submit" |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain |
Especifique cómo se deben codificar los datos del formulario antes de enviarlos a un servidor. Solo para type="submit" |
| formmethod | get post |
Especifica cómo enviar los datos del formulario (qué método HTTP utilizar). Sólo para type="submit" |
| formnovalidate | formnovalidate | Especifique que los datos del formulario no deben validarse al enviarlos. Sólo para type="submit" |
| formtarget | _blank _self _parent _top framename |
Especifique dónde mostrar la respuesta después de enviar el formulario. Sólo para type="submit" |
| name | name | Especifica un nombre para el botón |
| type | button reset submit |
Especificar el tipo de botón |
| value | text | Especificar un valor inicial para el botón |
Atributos globales
La etiqueta <button> también soporta los Atributos Globales en HTML.
Atributos del evento
La etiqueta <button> también soporta los Atributos de Evento en HTML.
Más ejemplos
Ejemplo
Utilice CSS para diseñar botones:
<!DOCTYPE html>
<html>
<head>
<style>
.button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
</style>
</head>
<body>
<button class="button button1">Green</button>
<button class="button button2">Blue</button>
</body>
</html>
Try it Yourself »
Ejemplo
Utilice CSS para diseñar botones (con efecto de desplazamiento):
<!DOCTYPE html>
<html>
<head>
<style>
.button {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
.button2 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button2:hover {
background-color: #008CBA;
color: white;
}
</style>
</head>
<body>
<button class="button button1">Green</button>
<button class="button button2">Blue</button>
</body>
</html>
Try it Yourself »
Páginas Relacionadas
Referencia DOM HTML: Objeto de Button.
Tutorial CSS: Botones de estilo.
Configuración CSS predeterminada
Ninguno.
