Docs ejecutables de HTML: Botón con enlace

Q: ¿Cómo hago un botón que lleve a otra página en HTML?

Usa un enlace y dale estilo de botón: Sign up con CSS para el padding, el fondo, el border radius y text-decoration: none. Se ve como un botón y se comporta como un enlace, que es lo que es.

Q: ¿Puedo poner un botón dentro de una etiqueta a?

No. El estándar HTML no permite contenido interactivo como dentro de . Los navegadores lo tratan de formas distintas, quienes usan el teclado encuentran dos paradas de Tab para un solo control, y los lectores de pantalla lo anuncian de forma confusa. Usa un solo elemento.

Q: ¿Un button tiene atributo href?

No. no tiene href. Para llevar al navegador a una URL, usa , o pon el botón en un con un action (un atributo formaction en el botón lo sobrescribe).

Q: ¿Cómo deshabilito un enlace con aspecto de botón?

Los enlaces no tienen atributo disabled. Quita el href para que deje de ser un enlace, añade aria-disabled="true" y dale estilo de deshabilitado. Vuelve a poner el href cuando deba funcionar de nuevo.

Cómo hacer un botón que enlace a una página

Escribe un enlace normal, <a href>, y dale estilo con CSS para que parezca un botón. Lleva a la página como cualquier enlace y conserva todas las funciones de un enlace: abrir en una pestaña nueva, copiar la dirección del enlace y la vista previa de la URL al pasar el ratón.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Button link</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      display: inline-block;
      padding: 10px 18px;
      border-radius: 8px;
      background: #2563eb;
      color: #fff;
      font-weight: 600;
      text-decoration: none;
    }
    .btn:hover { background: #1d4ed8; }
    .btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <a class="btn" href="https://developer.mozilla.org/">Read the docs</a>
</body>
</html>

Las reglas que convierten un enlace en un botón:

display: inline-block permite que el padding agrande la caja y la mantiene en la línea de texto.
text-decoration: none quita el subrayado.
color y background reemplazan el color azul de enlace.
:focus-visible da a quienes usan el teclado un anillo de foco claro.

La misma clase funciona en un <button>, así que el botón de envío de un formulario y un enlace a otra página pueden verse idénticos mientras cada uno hace su propio trabajo.

Botón o enlace: qué elemento usar

La pregunta es qué pasa al hacer clic, no qué aspecto tiene.

Al pulsarlo	Usa	Ejemplos
Va a otra URL	`<a href>`	Registrarse, Leer más, Ver precios, Descargar
Cambia algo en esta página	`<button type="button">`	Abrir menú, Reproducir, Añadir al carrito, Mostrar contraseña
Envía un formulario	`<button type="submit">`	Iniciar sesión, Buscar, Guardar

Un enlace anunciado como "enlace" y un botón anunciado como "botón" les dicen a quienes usan lectores de pantalla qué va a pasar. Su comportamiento con el teclado también es distinto: Enter activa los dos, pero Espacio solo activa los botones (en un enlace, Espacio desplaza la página). El elemento button en sí se explica en botones HTML.

Por qué no poner un botón dentro de un enlace

Este es el patrón que casi todo el mundo prueba primero:

<!-- Invalid: interactive content inside <a> -->
<a href="/signup"><button>Sign up</button></a>

<!-- Invalid the other way round, too -->
<button><a href="/signup">Sign up</a></button>

El estándar HTML prohíbe las dos cosas: <a> y <button> no pueden contener elementos interactivos. En la práctica, el teclado encuentra dos paradas de Tab para un solo control, un lector de pantalla puede anunciar "enlace, botón, Sign up", y que un clic siga el enlace o no depende del navegador. Elige un solo elemento.

Por qué no usar onclick con location.href

La otra solución habitual es un botón que cambia la URL con JavaScript. Se ve igual que un enlace:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link vs onclick</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      display: inline-block;
      padding: 10px 18px;
      border: 0;
      border-radius: 8px;
      background: #16a34a;
      color: #fff;
      font: inherit;
      text-decoration: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <a class="btn" href="https://example.com/">Real link</a>
  <button class="btn" type="button"
    onclick="window.open('https://example.com/')">Button with onclick</button>
  <p>Hover both, then right-click both.</p>
</body>
</html>

(El ejemplo usa window.open porque la vista previa no debe navegar fuera; el código habitual es location.href = '...'.) Pasa el ratón por encima de los dos y haz clic derecho: solo el enlace real muestra su URL y ofrece "Abrir enlace en una pestaña nueva" y "Copiar dirección del enlace". El botón tampoco admite Ctrl+clic ni clic central, el navegador no lo marca como visitado y los buscadores no lo siguen como enlace. Si el destino es una URL, escribe <a href>.

Un botón de formulario que abre una URL

Hay un caso en el que un <button> que va a otra página es lo correcto: cuando envía datos con él. Un cuadro de búsqueda es el ejemplo clásico. El action del formulario es la URL y method="get" pone los campos en la cadena de consulta:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Search form</title>
</head>
<body>
  <form action="https://duckduckgo.com/" method="get">
    <label>Search <input type="search" name="q" value="html button link" required></label>
    <button type="submit">Search</button>
    <button type="submit" formaction="https://www.bing.com/search">Search with Bing</button>
  </form>
</body>
</html>

Pulsa Search: en una página real, el navegador iría a https://duckduckgo.com/?q=html+button+link. La vista previa muestra los datos en lugar de salir. formaction envía el mismo formulario a otra URL desde el segundo botón.

Enlaces con aspecto de botón deshabilitados

Los enlaces no tienen atributo disabled; <a disabled> no hace nada. Para desactivar un enlace con aspecto de botón, quita su href (un <a> sin href no es un enlace y no se puede pulsar ni recibir el foco), y márcalo con aria-disabled="true" para que lo sepan tanto el estilo como los lectores de pantalla:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Disabled link button</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      display: inline-block;
      padding: 10px 18px;
      border-radius: 8px;
      background: #2563eb;
      color: #fff;
      text-decoration: none;
    }
    .btn[aria-disabled="true"] {
      background: #e5e7eb;
      color: #6b7280;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <a class="btn" href="https://example.com/">Continue</a>
  <a class="btn" aria-disabled="true">Continue</a>
</body>
</html>

Pulsa Tab en la vista previa: el foco solo llega al primer botón. Algunos sitios mantienen el href y añaden pointer-events: none, pero eso solo bloquea el ratón. El enlace sigue siendo accesible con Tab y Enter lo sigue abriendo.

Botones para pestaña nueva y descarga

Todos los atributos de enlace siguen funcionando en un enlace con estilo de botón:

<a class="btn" href="/files/guide.pdf" download>Download the guide</a>
<a class="btn" href="https://github.com/" target="_blank" rel="noopener">GitHub</a>

Es otro motivo para usar <a>: un <button> no tiene download ni target. Más sobre target en abrir un enlace en una pestaña nueva.

Errores comunes

Un botón dentro de un enlace, o un enlace dentro de un botón. HTML no válido con un comportamiento impredecible.
<button onclick="location.href=..."> para navegar sin más. Sin pestaña nueva, sin copiar enlace, sin rastreo.
role="button" en un enlace que navega. Les dice a quienes usan lectores de pantalla que hay un botón, y luego la página cambia. Déjalo como enlace.
Enlaces con estilo de botón para acciones como "Eliminar" o "Abrir menú" con href="#". Si no se carga nada, usa un <button type="button">.
<a disabled>. El atributo no existe en los enlaces. Quita el href.
Olvidar display: inline-block, con lo que el padding vertical se solapa con las líneas de arriba y de abajo.

Preguntas frecuentes

¿Cómo hago un botón que lleve a otra página en HTML?

Usa un enlace y dale estilo de botón: <a href="/signup" class="btn">Sign up</a> con CSS para el padding, el fondo, el border radius y text-decoration: none. Se ve como un botón y se comporta como un enlace, que es lo que es.

¿Puedo poner un botón dentro de una etiqueta a?

No. El estándar HTML no permite contenido interactivo como <button> dentro de <a>. Los navegadores lo tratan de formas distintas, quienes usan el teclado encuentran dos paradas de Tab para un solo control, y los lectores de pantalla lo anuncian de forma confusa. Usa un solo elemento.

¿Un button tiene atributo href?

No. <button> no tiene href. Para llevar al navegador a una URL, usa <a href>, o pon el botón en un <form> con un action (un atributo formaction en el botón lo sobrescribe).

¿Está mal usar onclick con location.href en un botón?

Funciona, pero el lector pierde todo lo que dan los enlaces: clic central y Ctrl+clic para abrir en una pestaña nueva, Copiar dirección del enlace, la vista previa de la URL al pasar el ratón, y los buscadores no lo siguen como enlace. Usa un <a> cuando el destino es una URL.

¿Cómo deshabilito un enlace con aspecto de botón?

Los enlaces no tienen atributo disabled. Quita el href para que deje de ser un enlace, añade aria-disabled="true" y dale estilo de deshabilitado. Vuelve a poner el href cuando deba funcionar de nuevo.

Conceptos relacionados