¿Cómo crear un botón HTML que actúa como un link?

Me gustaría crear un botón HTML que actúa como un link. Entonces cuando haga clic en este me redireccione a la página. Me gustraía que fuera lo más accesible posible.

También me gustaría que no haya caracteres o parámetros extras en la URL.

¿Cómo puedo lograr esto?


Basado en las respuestas posteadas hasta ahora, actualmente estoy haciendo lo siguiente:

<form method="get" action="/page2">
 <button type="submit">Continue
</form>

Pero el problema con esto es que en Safari y en Internet Explorer, agregan signos de pregunta al final de la URL. Necesito encontrar una solución que no agregue ningún caracter al final de la URL.

Hay otras dos soluciones para hacer esto: Usar JavaScript o diseñar un link para que lusca como un botón.

Con JavaScript:

<button onclick="window.location.href='/page2'">Continue</button>

Pero obviamente requiere JavaScript y por esa razón es menos accesible a los lectores de pantallas. El pundo de un link es ir a otra página. Por eso tratar de hacer un botón que actúe como un link es una solución equivocada. Mi sugerencia es que deberias usar un link y diseñarlo como un botón.

<a href="/link/to/page2">Continue</a>

  • html
  • button
  • hyperlink
  • anchor
  • htmlbutton
6 Repuestas

HTML

La forma simple de poner HTLM e un <form> en donde especificas el target URL deseado en el atributo de la acción.

<form action="http://google.com">
        <input type="submit" value="Go to Google" />
</form>

Si es necesario configura CSS display: inline; la forma para mantenerla en el flujo del texto circundante. En vez de <input type="submit"> como en el ejemplo de arriba, también puedes usar <button type="submit">. La única diferencia es que el elemento <button> permite a los niños.

Intuitivamente esperarías poder usar <button href="http://google.com"> analogo al elemento <a>, pero desafortunadamente no, este atributo no existe acorde con el HTML specification.

CSS

Si se permite CSS, simplemente usa un <a> el cual tu diseña el aspecto de un botón usando entre otros el appearance apropiadamente (solamente el soporte de Internet Explorer es actual (Julio de 2015) ).

<a href="http://google.com" class="button">Go to Google</a>

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

O elije una de las varias bibliotecas CSS como Bootstrap.

<a href="http://google.com" class="btn btn-default">Go to Google</a>

JavaScript

Si se permite javaScript, configura window.location.href.

<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />

Si lo que buscas es el aspecto visual de un botón en una etiqueta de anclaje HTML básica, puedes utilizar Twitter Bootstrap framework para dar formato a cualquiera de los siguientes enlaces/botones de tipo HTML comunes para que aparezcan como un botón. Por favor ten en cuenta las diferencias visuales entre las versiones 2, 3 o 4 de framwork.

<a class="btn" href="">Link</a>
 <button class="btn" type="submit">Button</button>
 <input class="btn" type="button" value="Input">
 <input class="btn" type="submit" value="Submit">

Bootstrap (v4) Apariencia de la muestra:

Usa:

<a href="http://www.stackoverflow.com/">
    <button>Click me</button>
</a>

Desafortunadamente este marcador no tiene más validez en HTML5 ni se validará ni tampoco funciona como es potencialmente esperado. Utiliza otro enfoque.

Ya que los botones HTML5, suportan el atributo de formacion. Lo mejor de todo es que no se necesita ni Javascript o trickery.

Advertencias:

  • Debe estar rodeado por <form> las etiquetas.
  • <button> el tipo debe ser "submit" (o no especificado), No pude hacer que funcionara con este tipo de "botón". El que trae un punto debajo.
  • Anula la acción predeterminada en una forma. En otras palabras, si haces esto dentro de otra forma va a causar un conflicto.

Referencia: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction
Soporte del navegador: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Browser_compatibility

De hecho es muy simple y sin usar ningún elemento de forma. Solo puedes usar la etiqueta <a> con un botón por dentro :)

Como esto:

<a href="http://www.google.com" target="_parent"><button>Click me!</button></a>

Esto cargará el href en la misma página. ¿Quieres una nueva página? Solo usa target="_blank"

Si estás utilizando un formulario interno, agrega el atributo type="reset" junto con el elemento de botón. Evitará la acción de la forma.

<button type="reset" onclick="location.href='http://www.example.com'">
    www.example.com
</button>