Cómo hacer que un botón HTML actúe como un enlace

La forma correcta de hacer que un control HTML abra una URL depende de su resultado. Para navegar, usa un elemento <a> con href y aplícale estilos para que parezca un botón. Usa <button> cuando el control ejecuta una acción y un botón de envío cuando envía datos de un formulario. No coloques <button> ni <input> dentro de <a>: ambos son elementos interactivos y la combinación produce una semántica y un comportamiento de teclado confusos.

Elige un ancla o un botón según el resultado

Usa un ancla cuando la activación cambia la ubicación, abre un documento, descarga un archivo o lleva a otra página. href proporciona un destino real; por eso el usuario puede abrirlo en otra pestaña, copiar la dirección, guardarlo como marcador y acceder a él con el teclado.

Usa <button type="button"> cuando la activación modifica la página actual o inicia una acción, como abrir un diálogo, mostrar un panel o ejecutar un script. La apariencia rectangular no convierte un botón en un enlace. El papel del elemento debe coincidir con su comportamiento.

Da apariencia de botón a un elemento <a> para navegar

Esta es la solución recomendada cuando solo necesitas navegar. Mantén el destino en href, escribe un texto descriptivo y muestra el foco. Sustituye /docs/ por tu destino.

<a class="button-link" href="/docs/">Open the documentation</a>

.button-link {
  display: inline-block;
  padding: 0.65rem 1rem;
  border-radius: 0.35rem;
  background: #1769aa;
  color: #fff;
  text-decoration: none;
}

.button-link:hover {
  background: #0d4f80;
}

.button-link:focus-visible {
  outline: 3px solid #f5b700;
  outline-offset: 2px;
}

El resultado parece un botón, pero sigue siendo un enlace. Enter lo activa y el navegador conoce su destino. Si abre otra pestaña, indícalo en el texto:

<a href="https://example.com/docs" target="_blank" rel="noopener">
  Open the documentation (new tab)
</a>

No uses href="#" ni href="javascript:void(0)" para simular un botón. No representan un destino real y pueden causar desplazamientos o comportamientos inesperados. Si no hay navegación, usa un botón real. El valor de href puede ser una ruta relativa, una URL HTTPS absoluta, un fragmento u otra URL direccionable. CSS cambia la presentación, no la semántica ni las funciones nativas del enlace.

Usa <button> con JavaScript solo para una acción de botón

Un botón puede ser necesario si antes de navegar hay que comprobar un estado o realizar otra acción. Declara el tipo y registra un listener con addEventListener. window.location.assign() realiza la navegación.

<button type="button" id="docs-button">Open the documentation</button>

<script>
  document.querySelector("#docs-button").addEventListener("click", () => {
    window.location.assign("https://example.com/docs");
  });
</script>

Este ejemplo responde al puntero, Enter y Espacio, pero depende de JavaScript. Para una navegación normal, prefiere el ancla, que conserva sus funciones aunque JavaScript esté desactivado. En una aplicación grande, coloca el listener en un módulo en vez de usar un atributo onclick. Una URL vacía o incorrecta es un caso límite: valida los valores dinámicos antes de llamar a assign().

Usa un formulario cuando la tarea sea enviar datos

La variante con formulario es adecuada cuando un servidor recibe los datos. Pon el destino en action y usa un control de envío. Esto es un envío de formulario, no una simple navegación de enlace.

<form action="/search" method="get">
  <label for="query">Search</label>
  <input id="query" name="q" type="search">
  <button type="submit">Search</button>
</form>

Enviar CSS button puede producir /search?q=CSS+button, según la codificación normal del formulario. No uses un formulario vacío solo para obtener la apariencia de botón. formaction puede dar un destino diferente a un botón type="submit" concreto.

Cuando un proyecto necesita la sintaxis basada en value, también es válido usar <input type="submit">:

<form action="/docs/" method="get">
  <input type="submit" value="Open the documentation">
</form>

value es la etiqueta visible. No envuelvas este input en un ancla. <input type="button"> no envía ni navega por sí solo; necesitaría un script.

Soluciona un botón que no abre el enlace

• Para navegar, el marcado debe ser <a href="...">, aunque CSS lo haga parecer un botón.
• En un formulario, usa type="button" para una acción que no envía datos. Sin tipo, el botón suele ser submit y puede recargar la página.
• Si el botón JavaScript no funciona, comprueba la consola, el selector y la carga del script. Sin JavaScript no funciona el handler.
• Conserva :focus-visible para que los usuarios de teclado puedan identificar el control.
• No combines un ancla con un <button> o <input> anidado para un enlace normal.

En resumen, usa <a href="..."> para navegar, <button type="button"> para acciones y un botón submit dentro de un formulario cuando debas enviar datos. Estas elecciones dan a los navegadores y a las tecnologías de asistencia una semántica predecible.