Etiqueta HTML <button>
La etiqueta HTML <button> crea botones interactivos. Aprende el atributo type, estilos, el estado disabled y accesibilidad, con ejemplos.
La etiqueta <button> crea un botón interactivo en la página web. A diferencia de un botón creado con la etiqueta <input>, un <button> puede contener contenido enriquecido — texto, imágenes u otro HTML en línea — entre sus etiquetas de apertura y cierre. Esto lo convierte en el elemento preferido para la mayoría de los botones hoy en día, ya que es más fácil de estilizar y permite combinar un icono con una etiqueta de texto.
Esta página cubre la sintaxis de <button>, el importantísimo atributo type (y el error que surge al olvidarlo dentro de un formulario), los estilos, el estado disabled, la accesibilidad y cómo se compara <button> con <input>.
En el pasado, algunos desarrolladores usaban <input type="button"> en lugar de <button> porque versiones muy antiguas de Internet Explorer renderizaban <button> de forma inconsistente. Ese problema ya desapareció — en los navegadores modernos, <button> es la opción recomendada.
Sintaxis
La etiqueta <button> funciona en pares. El contenido se escribe entre las etiquetas de apertura (<button>) y cierre (</button>).
Ejemplo de la etiqueta HTML <button>:
Ejemplo de la etiqueta HTML <button>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Here will be our button</h1>
<button type="button">Click</button>
</body>
</html>El atributo type
El atributo type define lo que hace un botón. Existen tres valores:
submit— envía el formulario padre.reset— restablece todos los controles del formulario a sus valores iniciales.button— no hace nada por sí solo; el comportamiento se configura con JavaScript.
El error más común: dentro de un <form>, un <button> sin type tiene como valor predeterminado type="submit". Por lo tanto, un botón que se pretendía usar como acción simple enviará el formulario (recargando la página con frecuencia) en el momento en que se haga clic. Siempre establece type="button" de forma explícita para los botones que no son de envío dentro de un formulario.
Ejemplo de submit, reset y button:
Ejemplo de los tres tipos de botón
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/submit">
<label>Name: <input type="text" name="name"></label>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button" onclick="alert('Just a button!')">Say hi</button>
</form>
</body>
</html>Submit envía el formulario, Reset limpia el campo de texto y Say hi solo ejecuta su JavaScript sin afectar el formulario.
Uso de estilos CSS
Puedes aplicar estilos CSS a la etiqueta <button> para cambiar la apariencia del botón, su tamaño, color, fuente del texto, entre otros.
Ejemplo de la etiqueta <button> con estilos CSS:
Ejemplo de la etiqueta HTML <button> con propiedades CSS de color y fuente
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.red-text {
color: red;
}
.big-text {
font: bold 14px Arial;
}
</style>
</head>
<body>
Ordinary button
<button type="button">Add to the recycle bin</button>
<hr />
Button with red text
<button type="button" class="red-text"><b>HTML Book</b></button>
<hr />
Button with increased font size
<button type="button" class="big-text">Download the book</button>
</body>
</html>Resultado
El estado disabled
Un botón con el atributo disabled no puede ser clicado ni enfocado, no activará sus manejadores de eventos ni enviará un formulario. Los navegadores también lo muestran en gris para que los usuarios puedan ver que está inactivo. Esto es útil cuando una acción no está disponible — por ejemplo, hasta que un formulario se haya completado correctamente.
Ejemplo de un botón desactivado
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<button type="button">Active button</button>
<button type="button" disabled>Disabled button</button>
</body>
</html>Atributos
La etiqueta <button> no tiene atributos obligatorios; sin embargo, recomendamos establecer siempre type="button" cuando la etiqueta se usa como un botón ordinario (que no envía el formulario), porque dentro de un formulario un type no establecido tiene como valor predeterminado submit.
| Atributos | Valor | Descripción |
|---|---|---|
autofocus | autofocus | Especifica que el botón debe recibir el foco después de cargar la página. |
disabled | disabled | Desactiva el botón. (Se usa cuando el botón debe activarse tras realizar alguna acción.) |
form | form_id | Especifica uno o más formularios a los que pertenece el botón. Si el botón tiene múltiples formularios, sus identificadores (form_id) deben separarse por espacios. |
formaction | URL | Define la dirección a la que se enviarán los datos del formulario tras hacer clic en el botón. (Solo se usa para botones con el atributo type="submit"). |
formenctype | application/x-www-form-urlencoded | Define cómo deben codificarse los datos del formulario al enviarlo. (Solo para type="submit"). Todos los símbolos se codifican antes de enviar el formulario (valor predeterminado). |
multipart/form-data | Codifica los datos como MIME multipart. | |
text/plain | Los espacios se reemplazan por el signo "+", pero los símbolos no se codifican. | |
formmethod | get | Define el método de la solicitud HTTP que se usará al enviar el formulario (solo para type="submit"). Pasa los datos del formulario en la barra de direcciones ("nombre = valor"), que se añaden a la URL de la página después del signo de interrogación y se separan con un ampersand (&). |
post | El navegador se comunica con el servidor y envía los datos para su procesamiento. | |
formnovalidate | formnovalidate | Especifica que los datos del formulario no deben validarse al enviarlo (solo para type="submit"). |
formtarget | _blank | Especifica dónde se mostrará la respuesta después de enviar el formulario (solo para type="submit"). Abre la respuesta en una nueva ventana. |
_self | Abre la respuesta en la ventana actual. | |
_parent | Abre la respuesta en el marco padre. | |
_top | Abre la respuesta en la ventana de ancho completo. | |
name | name | Define el nombre del botón. |
type | button | Define un botón ordinario. |
reset | Botón que borra los datos introducidos en el formulario. | |
submit | Botón para enviar los datos del formulario. | |
value | text | Define el valor del botón. |
La etiqueta <button> también admite los Atributos Globales y los Atributos de Evento.
Accesibilidad: dar un nombre accesible a un botón
Todo botón necesita un nombre accesible — el texto que anuncia un lector de pantalla. Para un botón de texto normal, el nombre es simplemente el texto entre las etiquetas. El problema aparece con los botones que solo contienen iconos, donde no hay texto visible.
Si lo único que hay dentro del botón es una imagen, dale al <img> un atributo alt que describa la acción, no la imagen. El botón tomará ese texto como su nombre:
<button type="button">
<img src="search.png" alt="Search">
</button>Aquí alt="Search" describe lo que hace el botón, por lo que un lector de pantalla anunciará "Search, button".
Si el botón no tiene texto ni imagen con alt — por ejemplo, un icono dibujado con una fuente de iconos o un SVG en línea — añade un aria-label para que el botón siga teniendo un nombre:
<button type="button" aria-label="Close menu">
<span class="icon-close" aria-hidden="true"></span>
</button>El aria-label es el nombre accesible del botón; aria-hidden="true" evita que el icono decorativo sea anunciado. Ten en cuenta que aria-label y un <img alt> interno son mecanismos independientes — usa el que mejor se adapte al marcado, y nunca dejes un botón de solo icono sin uno de ellos.
¿Cómo añadir un enlace a un botón?
Para crear un enlace interactivo que parezca un botón, usa un elemento <a> estilizado con CSS. Envolver un <button> dentro de un <a> no es válido en HTML5. Este es el enfoque correcto:
¿Cómo añadir un enlace a un botón?
<a href="https://example.com" class="button-link">
Button Label
</a>En este ejemplo, el elemento <a> se estiliza para parecerse a un botón. Cuando el usuario haga clic en él, será llevado a la URL enlazada.
<button> vs. <input type="button">
Puedes crear un botón con <button> o con la etiqueta <input> (type="button", type="submit" o type="reset"). Se comportan de forma similar, pero difieren en lo que pueden contener:
<button> | <input type="button"> / <input type="submit"> | |
|---|---|---|
| Fuente de la etiqueta | Contenido entre las etiquetas | El atributo value (solo texto plano) |
| Contenido enriquecido | Sí — texto, imágenes, iconos, otro HTML en línea | No — solo texto |
| Estilización | Más sencilla (pseudoelementos, elementos anidados) | Más limitada |
| Etiqueta de cierre | Obligatoria (</button>) | Ninguna — es un elemento vacío |
<!-- Rich content is possible -->
<button type="submit"><img src="check.png" alt=""> Save</button>
<!-- Text-only, set through value -->
<input type="submit" value="Save">Usa <button> cuando quieras un icono, texto con formato o un control de estilos más preciso; recurre a <input> cuando una etiqueta de texto simple sea todo lo que necesitas.