¿Cómo crear un botón HTML que actúe como un enlace?

Me gustaría crear un botón HTML que actúe como un enlace. Así, al hacer clic en el botón, se redirige a una página. Me gustaría que fuera lo más accesible posible.

También me gustaría que no hubiera caracteres extra, o parámetros en la URL.

¿Cómo puedo conseguirlo?

Basándome en las respuestas publicadas hasta ahora, actualmente estoy haciendo esto:

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

pero el problema con esto es que en Safari y Internet Explorer, añade un carácter de signo de interrogación al final de la URL. Necesito encontrar una solución que no añada ningún carácter al final de la URL.

Hay otras dos soluciones para hacer esto: Usar JavaScript o estilizar un enlace para que parezca un botón.

Usando JavaScript:

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

Pero esto obviamente requiere JavaScript, y por esa razón es menos accesible para los lectores de pantalla. El objetivo de un enlace es ir a otra página. Así que tratar de hacer que un botón actúe como un enlace es la solución equivocada. Mi sugerencia es que se utilice un enlace y se le dé el estilo de un botón.

<a href="/link/to/page2">Continue</a>
Community
Pregunta editada 23º mayo 2017 в 12:03
Programación
button html hyperlink anchor htmlbutton
25º mayo 2010 в 4:39
24 vistas
Solución

HTML

La forma de HTML simple es ponerlo en un `en el que se especifica la URL de destino deseada en el atributoaction`.


    <input type="submit" value="Go to Google" />

Si es necesario, establece CSS display: inline; en el formulario para mantenerlo en el flujo con el texto circundante. En lugar de <input type="submit"> en el ejemplo anterior, también puede utilizar . La única diferencia es que el elemento permite niños.

Intuitivamente esperarías poder usar `de forma análoga al elemento`, pero desafortunadamente no, este atributo no existe según la especificación HTML.

CSS

Si se permite el uso de CSS, basta con utilizar un <a> que se estiliza para que parezca un botón utilizando, entre otras, la propiedad appearance (sólo el soporte de Internet Explorer es actualmente (julio de 2015) todavía pobre).

<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 elegir una de esas muchas bibliotecas CSS como Bootstrap.

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

JavaScript

Si se permite el uso de JavaScript, se establece el window.location.href.

<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />
BalusC
Respuesta editada 4º agosto 2016 в 10:53
Comentarios (20)
 

    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'">
Peter Mortensen
Respuesta editada 21º julio 2014 в 3:22
Comentarios (6)

La única manera de hacerlo (¡excepto la ingeniosa idea de BalusC sobre el formulario!) es añadiendo un evento JavaScript onclick al botón, lo que no es bueno para la accesibilidad.

¿Has considerado estilizar un enlace normal como un botón? No puedes conseguir botones específicos para el sistema operativo de esta manera, pero sigue siendo la mejor forma, según la OMI.

Peter Mortensen
Respuesta editada 21º julio 2014 в 3:24
Comentarios (5)