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

1909

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

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

¿Cómo puedo conseguir esto?


Según 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 e Internet Explorer , agrega un signo de interrogación al final de la URL. Necesito encontrar una solución que no agregue ningún carácter al final de la URL.

Hay otras dos soluciones para hacer esto: usar JavaScript o diseñar 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 eso es menos accesible para los lectores de pantalla. El punto de un enlace es ir a otra página. Entonces, tratar de hacer que un botón actúe como un enlace es la solución incorrecta. Mi sugerencia es que debe usar un enlace y darle un estilo para que parezca un botón .

<a href="/link/to/page2">Continue</a>
Andrés
fuente
38
Cambia GET a POST. Nadie parece haber abordado el primer problema del OP, que era el ?de la URL. Esto es causado por el formulario type="GET", cambie esto a type="POST"y ?al final de la URL desaparece. Esto se debe a que GET envía todas las variables en la URL, de ahí el ?.
redfox05
11
@ redfox05 Esto funciona en un contexto en el que no es estricto sobre el método que acepta para sus páginas. En un contexto en el que rechaza las publicaciones en páginas que esperan GETque falle. Sigo pensando que usar un enlace tiene sentido con la advertencia de que no reaccionará a la "barra espaciadora" cuando se activa como el botón. Además, algunos estilos y comportamientos serán diferentes (como arrastrar). Si desea la verdadera experiencia de "enlace de botón", ?también puede ser una opción tener redireccionamientos del lado del servidor para que la URL termine para eliminarla.
Nicolas Bouvrette
1
cssbuttongenerator.com puede ser útil si desea crear un botón con css.
nieve
1
Creo que es mejor crear un enlace que parezca un botón
yasar
1
Solo una nota, para mí "el botón actúa como enlace" significa que puedo hacer clic derecho y decidir si abrir en una nueva pestaña / ventana, lo que no funciona con las soluciones JS ...
Betlista

Respuestas:

2107

HTML

La forma HTML simple es ponerlo en un lugar <form>donde especifique la URL de destino deseada en el actionatributo.

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

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

De forma intuitiva, esperaría poder usar <button href="https://google.com">un <a>elemento análogo con el elemento, pero desafortunadamente no, este atributo no existe de acuerdo con la especificación HTML .

CSS

Si se permite CSS, simplemente use un <a>estilo que parezca un botón usando, entre otros, la appearancepropiedad ( solo no es compatible con Internet Explorer ).

<a href="https://google.com" class="button">Go to Google</a>
a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

O elija una de esas muchas bibliotecas CSS como Bootstrap .

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

JavaScript

Si JavaScript está permitido, configure el window.location.href.

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

En lugar del <input type="button">ejemplo anterior, también puede usar <button>. La única diferencia es que el <button>elemento permite niños.

BalusC
fuente
86
Simple y agradable Una buena solución. Agregue display: inlineal formulario para mantener el botón en el flujo.
Pekka
13
en safari, esto agrega un signo de interrogación al final de la url ... ¿hay alguna manera de hacerlo que no agregue nada a la url?
Andrew
11
@BalusC Buena solución, pero si está dentro de algún otro formulario (formulario principal), al presionar este botón se redirige a la dirección en el atributo de acción del formulario principal.
Vladimir
100
¿Soy solo yo o la etiqueta <button> no tiene un atributo href obvio?
14
Parece simple y agradable, pero puede tener efectos secundarios si no se considera adecuadamente. es decir, crear el segundo formulario en la página, el formulario anidado, etc.
Tejasvi Hegde
598

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

Tenga en cuenta que el type="button"atributo es importante, ya que el valor predeterminado que falta es el estado del botón Enviar .

Adán
fuente
1
@pinouchon debería funcionar. La ventana está implícita. Podría ser un error de IE9, stackoverflow.com/questions/7690645/…
Adam
12
Parece que si no especifica type = "button", esto no siempre funcionará. Parece que el botón predeterminado "enviar"
kenitech 03 de
58
Si desea abrir el enlace en una nueva ventana / pestaña, utilice: onclick = "window.open (' example.com', '_ blank' );"
bennos
44
@kenitech correcto, de acuerdo con las especificaciones : "El valor predeterminado que falta es el estado del botón Enviar ".
Niels Keurentjes
44
pero el usuario no puede hacer clic derecho en abrir en una pestaña nueva, para que eso funcione, necesita la etiqueta de anclaje
Irshu
433

Si es la apariencia visual de un botón lo que está buscando en una etiqueta de anclaje HTML básica, puede usar el marco Twitter Bootstrap para formatear cualquiera de los siguientes enlaces / botones de tipo HTML comunes para que aparezcan como un botón. Tenga en cuenta las diferencias visuales entre la versión 2, 3 o 4 del marco:

<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">

Apariencia de muestra de Bootstrap (v4) :

Salida de muestra de los botones Boostrap v4

Apariencia de muestra de Bootstrap (v3) :

Salida de muestra de botones Boostrap v3

Apariencia de muestra Bootstrap (v2) :

Salida de muestra de botones Boostrap v2

Berna
fuente
46
Parece un poco exagerado para diseñar un solo botón, ¿no? Con borde, relleno, fondo y otros efectos CSS, puede diseñar botones y enlaces para que se vean similares sin traer un marco completo. La metodología que utiliza Bootstrap es buena, sin embargo, usar Bootstrap parece excesivo.
scottkellum
150

Utilizar:

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

Desafortunadamente, este marcado ya no es válido en HTML5 y no validará ni siempre funcionará como se esperaba. Usa otro enfoque.

RedFilter
fuente
59
@BalusC: Tampoco esta página
Robert Harvey
3
@Rob: ese no es mi problema :) Tíralo a Meta y verás. Sin embargo, el targetatributo es imo en el borde.
BalusC
128

A partir de HTML5, los botones admiten el formactionatributo. Lo mejor de todo es que no se necesita Javascript ni trucos.

<form>
  <button formaction="http://stackoverflow.com">Go to Stack Overflow!</button>
</form>

Advertencias

  • Debe estar rodeado de <form>etiquetas.
  • <button>type debe ser "submit" (o no especificado), no pude hacerlo funcionar con el tipo "button". Lo que trae el siguiente punto.
  • Invalida la acción predeterminada en un formulario. 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 / Elemento / botón # Compatibilidad del navegador

Hora eterna
fuente
55
Solo para completar la información: formactiones compatible desde " IE world " desde la versión 10 y superior
Luca Detomi
1
@EternalHour genuinamente curioso. En los ejemplos que usted y yo proporcionamos, ¿se supone que haya una diferencia apreciable entre el comportamiento de esas dos formas? En este caso específico, ¿ <button formaction>=== <form action>?
pseudosavant
2
@pseudosavant: la diferencia es que su respuesta se basa en Javascript para funcionar. En esta solución, no se necesita Javascript, es HTML directo.
EternalHour
1
@ EternalHour Lo siento, debería haber sido más claro. Obviamente, el JS hace que la mía sea diferente, pero es solo una mejora progresiva. La forma todavía va a ese enlace sin el JS. Tenía curiosidad sobre el comportamiento previsto de solo los HTML <form>en cada uno de nuestros ejemplos. Está formactionen una buttonsupone que añadir el ?de una presentación GET vacío? En este JSBin parece que el HTML se comporta exactamente igual para ambos.
pseudosavant
2
Es útil tener en cuenta que esto solo funciona cuando está envuelto por etiquetas de formulario. Lo descubrí de la manera difícil ...
Adsy2010
57

Es realmente muy simple y sin usar ningún elemento de forma. Puede usar la etiqueta <a> con un botón dentro :).

Me gusta esto:

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

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

EDITAR

Un par de años más tarde, mientras mi solución aún funciona, tenga en cuenta que puede usar una gran cantidad de CSS para que se vea como quiera. Esto fue solo una manera rápida.

Lucian Minea
fuente
18
Si bien esto funciona, no debe considerarse como una solución, sino una solución alternativa porque si pasa este código a través del validador W3C, obtendrá errores.
Hyder B.
77
Sí, Hyder B. tienes razón, pero también debes tener en cuenta que los estándares son solo guías en bruto. Como programador, siempre debes pensar fuera de la caja y probar cosas que no están en el libro;).
Lucian Minea
NUNCA envuelva otros anclajes o elementos de acción de forma en Anchor.
Roko C. Buljan
Ajá, y por qué es eso?
Lucian Minea
Debe usarlo <button type="button">...para que no funcione de manera predeterminada como Enviar
Stephen R
39

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

<button type="reset" onclick="location.href='http://www.example.com'">
    www.example.com
</button>
saravanabawa
fuente
Solo si desea restablecer su formulario. Usotype="button"
Stephen R
27
<form>
    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'"> 
</form>
ghoppe
fuente
8
@Robusto que fue un comentario sarcástico sobre el espacio vacío que solía estar allí :) Esta no es una buena solución IMO, ya que no funcionará sin JavaScript.
Pekka
1
@Pekka: sí, y ni siquiera está bien formado xhtml
Sean Patrick Floyd
8
si usa el formulario, simplemente use un envío, si usa onclick, ¿por qué molestarse con el formulario? -1
NimChimpsky
No es HTML bien formado. La etiqueta inputno tiene una etiqueta final.
Peter Mortensen
10
@PeterMortensen Según la especificación HTML , el inputelemento es un elemento vacío. Debe tener una etiqueta de inicio pero no debe tener una etiqueta de finalización.
ghoppe
27

Parece que hay tres soluciones a este problema (todas con ventajas y desventajas).

Solución 1: abotone en un formulario.

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

Pero el problema con esto es que en algunas versiones de navegadores populares como Chrome, Safari e Internet Explorer, agrega un carácter de signo de interrogación al final de la URL. En otras palabras, para el código que se encuentra arriba de su URL terminará luciendo así:

http://someserver/pages2?

Hay una forma de solucionar esto, pero requerirá una configuración del lado del servidor. Un ejemplo usando Apache Mod_rewrite sería redirigir todas las solicitudes con un seguimiento ?a su URL correspondiente sin el ?. Aquí hay un ejemplo usando .htaccess, pero hay una rosca completa aquí :

RewriteCond %{THE_REQUEST} \?\ HTTP [NC]
RewriteRule ^/?(index\.cfm)? /? [R=301,L]

Configuraciones similares pueden variar según el servidor web y la pila utilizada. Entonces, un resumen de este enfoque:

Pros:

  1. Este es un botón real, y semánticamente tiene sentido.
  2. Como es un botón real, también actuará como un botón real (por ejemplo, comportamiento arrastrable y / o imitará un clic al presionar la barra espaciadora cuando esté activo).
  3. Sin JavaScript, no se requiere un estilo complejo.

Contras:

  1. Trailing se ?ve feo en algunos navegadores. Esto puede solucionarse mediante un hack (en algunos casos) usando POST en lugar de GET, pero la forma más limpia es tener una redirección del lado del servidor. La desventaja con la redirección del lado del servidor es que causará una llamada HTTP adicional para estos enlaces debido a la redirección 304.
  2. Agrega <form>elemento extra
  3. El posicionamiento de elementos cuando se usan múltiples formas puede ser complicado y empeorar aún más cuando se trata de diseños receptivos. Es posible que sea imposible lograr un diseño con esta solución dependiendo del orden de los elementos. Esto puede terminar afectando la usabilidad si el diseño se ve afectado por este desafío.

Solución 2: uso de JavaScript.

Puede usar JavaScript para activar onclick y otros eventos para imitar el comportamiento de un enlace con un botón. El siguiente ejemplo podría mejorarse y eliminarse del HTML, pero está ahí simplemente para ilustrar la idea:

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

Pros:

  1. Simple (para requisitos básicos) y mantener la semántica sin requerir una forma adicional.
  2. Como es un botón real, también actuará como un botón real (por ejemplo, comportamiento arrastrable y / o imitará un clic al presionar la barra espaciadora cuando esté activo).

Contras:

  1. Requiere JavaScript, lo que significa menos accesible. Esto no es ideal para un elemento base (núcleo) como un enlace.

Solución 3: Ancla (enlace) con el estilo de un botón.

Diseñar un enlace como un botón es relativamente fácil y puede proporcionar una experiencia similar en diferentes navegadores. Bootstrap hace esto, pero también es fácil de lograr por sí solo usando estilos simples.

Pros:

  1. Simple (para requisitos básicos) y buena compatibilidad entre navegadores.
  2. No necesita un <form>para trabajar.
  3. No necesita JavaScript para funcionar.

Contras:

  1. La semántica está rota, porque quieres un botón que actúe como un enlace y no un enlace que actúe como un botón.
  2. No reproducirá todos los comportamientos de la solución # 1. No admitirá el mismo comportamiento que el botón. Por ejemplo, los enlaces reaccionan de manera diferente cuando se arrastran. Además, el activador de enlace "barra espaciadora" no funcionará sin algún código JavaScript adicional. Agregará mucha complejidad ya que los navegadores no son consistentes en cómo admiten keypresseventos en botones.

Conclusión

La solución n. ° 1 ( botón en un formulario ) parece la más transparente para los usuarios con un trabajo mínimo requerido. Si su diseño no se ve afectado por esta elección y el ajuste del lado del servidor es factible, esta es una buena opción para los casos en que la accesibilidad es la máxima prioridad (por ejemplo, enlaces en una página de error o mensajes de error).

Si JavaScript no es un obstáculo para sus requisitos de accesibilidad, se preferiría la solución n. ° 2 ( JavaScript ) en lugar de la n. ° 1 y la n. ° 3.

Si por alguna razón, la accesibilidad es vital (JavaScript no es una opción) pero se encuentra en una situación en la que su diseño y / o la configuración de su servidor le impiden usar la opción n. ° 1, entonces la solución n. ° 3 ( Anchor tiene el estilo de un botón ) Es una buena alternativa para resolver este problema con un impacto mínimo de usabilidad.

Nicolas Bouvrette
fuente
21

¿Por qué no colocar su botón dentro de una etiqueta de referencia, por ejemplo?

<a href="https://www.google.com/"><button>Next</button></a>

Esto parece funcionar perfectamente para mí y no agrega ninguna etiqueta% 20 al enlace, solo como lo desea. He usado un enlace a google para demostrar.

Por supuesto, podría envolver esto en una etiqueta de formulario, pero no es necesario.

Al vincular otro archivo local, simplemente colóquelo en la misma carpeta y agregue el nombre del archivo como referencia. O especifique la ubicación del archivo si in no está en la misma carpeta.

<a href="myOtherFile"><button>Next</button></a>

Esto tampoco agrega ningún carácter al final de la URL, sin embargo, tiene la ruta del proyecto de archivos como la URL antes de terminar con el nombre del archivo. p.ej

Si la estructura de mi proyecto era ...

.. denota una carpeta - denota un archivo mientras cuatro | denotar un subdirectorio o archivo en la carpeta principal

..public
|||| ..html
|||| |||| -main.html
|||| |||| -secondary.html

Si abro main.html la URL sería,

http://localhost:0000/public/html/main.html?_ijt=i7ms4v9oa7blahblahblah

Sin embargo, cuando hice clic en el botón dentro de main.html para cambiar a secundario.html, la URL sería,

http://localhost:0000/public/html/secondary.html 

No se incluyen caracteres especiales al final de la URL. Espero que esto ayude. Por cierto, (% 20 denota un espacio en una URL que está codificado e insertado en su lugar).

Nota: El host local: 0000 obviamente no será 0000, tendrá su propio número de puerto allí.

Además,? _Ijt = xxxxxxxxxxxxxx al final de la URL main.html, x está determinada por su propia conexión, por lo que obviamente no será igual a la mía.


Puede parecer que estoy afirmando algunos puntos realmente básicos, pero solo quiero explicar lo mejor que pueda. Gracias por leer y espero que esto ayude a alguien por lo menos. Feliz programación

C.Gadd
fuente
19

Simplemente puede poner una etiqueta alrededor del elemento:

<a href="http://google.com" target="_blank">
<button>My Button</button>
</a>

https://jsfiddle.net/hj6gob8b/

Uriahs Victor
fuente
10
No puedes. HTML prohíbe anidar en el <button>interior <a>.
Quentin
66
Esto es esencialmente lo mismo que esta respuesta de años anteriores .
Quentin
2
Si lo prohíbe, ¿por qué funciona? :) Ningún desarrollador serio hace caso a todo lo que dice el validador del W3C ... intente pasar Facebook o Google o cualquier sitio web enorme por allí ... La web no está esperando a nadie
Uriahs Victor
3
@UriahsVictor Puede funcionar hoy, pero un día los proveedores de navegadores pueden decidir cambiar el comportamiento ya que no es válido.
Jacob Alvarez
2
Los applets @UriahsVictor Flash y Java también eran bastante comunes.
Jacob Alvarez
17

La única forma de hacer esto (¡excepto la ingeniosa idea de formulario de BalusC!) Es agregando un onclickevento JavaScript al botón, que no es bueno para la accesibilidad.

¿Has considerado diseñar un enlace normal como un botón? No puede lograr botones específicos del sistema operativo de esa manera, pero sigue siendo la mejor manera de IMO.

Pekka
fuente
Creo que está hablando no solo de la funcionalidad (clic) sino también de la apariencia.
1
@Web Logic sí, por eso estoy hablando de diseñar el enlace para que parezca un botón.
Pekka
66
@ChrisMarisic hay muchas desventajas al usar onClick: no funciona con JS desactivado; el usuario no puede abrir un enlace en una nueva pestaña / ventana, ni copiar el enlace en su portapapeles para compartir; los analizadores y robots no podrán reconocer y seguir el enlace; los navegadores con una función de "captación previa" no reconocerán el enlace; y muchos más.
Pekka
2
Si bien esos son puntos válidos, realmente no creo que realmente aborden la accesibilidad. ¿Quiso decir usabilidad, no accesibilidad? En el desarrollo web, la accesibilidad suele reservarse específicamente para saber si los usuarios con discapacidad visual pueden manejar bien su aplicación.
Chris Marisic
17

Siguiendo lo que otros han agregado, puede volverse loco con solo usar una clase CSS simple sin PHP, sin código jQuery , solo HTML y CSS simples.

Crea una clase CSS y agrégala a tu ancla. El código está abajo.

.button-link {
    height:60px;
    padding: 10px 15px;
    background: #4479BA;
    color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-link:hover {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
}

<HTML>
    <a class="button-link" href="http://www.go-some-where.com"
       target="_blank">Press Here to Go</a>

Eso es. Es muy fácil de hacer y te permite ser tan creativo como quieras. Usted controla los colores, el tamaño, las formas (radio), etc. Para obtener más detalles, consulte el sitio en el que encontré esto .

artie
fuente
17

Si desea evitar tener que usar un formulario o una entrada y está buscando un enlace de botón, puede crear enlaces de botones atractivos con un envoltorio div, un ancla y una h1etiqueta. Es posible que desee esto para poder colocar libremente el botón de enlace alrededor de su página. Esto es especialmente útil para centrar botones horizontalmente y tener texto centrado verticalmente dentro de ellos. Así es cómo:

Su botón estará compuesto por tres piezas anidadas: un envoltorio div, un ancla y un h1, así:

.link-button-wrapper {
    width: 200px;
    height: 40px;
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    border-radius: 4px;
    background-color: #097BC0;
    box-shadow: 0px 2px 4px gray;
    display: block;
    border:1px solid #094BC0;
}
.link-button-wrapper > a {
    display: inline-table;
    cursor: pointer;
    text-decoration: none;
    height: 100%;
    width:100%;
}
.link-button-wrapper > a > h1 {
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
    color: #f7f8f8;
    font-size: 18px;
    font-family: cabinregular;
    text-align: center;
}
<div class="link-button-wrapper">
    <a href="your/link/here">
        <h1>Button!</h1>
    </a>
</div>

Aquí hay un jsFiddle para verlo y jugar con él.

Beneficios de esta configuración: 1. Hacer la pantalla de envoltura div: el bloque facilita el centrado (usando el margen: 0 automático) y la posición (mientras que un <a> está en línea y es más difícil de posicionar y no es posible centrarlo).

  1. Podrías hacer que la pantalla <a>: bloquee, muévelo y dale estilo como un botón, pero luego alinear verticalmente el texto dentro de él se vuelve difícil.

  2. Esto le permite hacer que la <a> pantalla: tabla en línea y la pantalla <h1>: tabla-celda, que le permite usar vertical-align: middle en <h1> y centrarlo verticalmente (lo cual siempre es bueno en un botón). Sí, podría usar relleno, pero si desea que su botón cambie de tamaño dinámicamente, no será tan limpio.

  3. A veces, cuando incrusta un <a> dentro de un div, solo se puede hacer clic en el texto, esta configuración hace que se pueda hacer clic en todo el botón.

  4. No tiene que lidiar con formularios si solo está tratando de pasar a otra página. Los formularios están destinados a ingresar información, y deben reservarse para eso.

  5. Le permite separar limpiamente el estilo del botón y el estilo del texto entre sí (¿ventaja de estiramiento? Seguro, pero CSS puede tener un aspecto desagradable, por lo que es bueno descomponerlo).

Definitivamente me hizo la vida más fácil diseñar un sitio web móvil para pantallas de tamaño variable.

MoMo
fuente
De hecho, obtienes un botón razonable sin ningún CSS en absoluto
Soren
15

@ Nicolas, el siguiente trabajo funcionó para mí ya que el tuyo no tenía type="button"debido a que comenzó a comportarse como tipo de envío ... ya que ya tengo un tipo de envío. No funcionó para mí ... y ahora puedes agregar clase para abotonar o <a>para obtener el diseño requerido:

<a href="http://www.google.com/">
    <button type="button">Click here</button>
</a>
Bhawna Jain
fuente
12

Otra opción es crear un enlace en el botón:

<button type="button"><a href="yourlink.com">Link link</a></button>

Luego, use CSS para diseñar el enlace y el botón, de modo que el enlace ocupe todo el espacio dentro del botón (para que el usuario no haga clic mal):

button, button a{position:relative;}
button a{top:0;left:0;bottom:0;right:0;}

He creado una demostración aquí .

lukeocom
fuente
66
Tenga en cuenta que la especificación dice que esto no es válido ya que los botones no deben contener descendientes interactivos. w3.org/TR/2011/WD-html5-20110525/the-button-element.html
lukeocom
1
Los dos están en lo correcto. VS2015 marca esto con una advertencia: "El elemento 'a' no se puede anidar dentro del elemento 'botón'", pero funciona con: IE11, Edge, Chrome, Firefox, Safari y al menos algunos (quizás todos) navegadores móviles actualmente. Así que no uses esta técnica, pero si lo hiciste en el pasado, funciona por ahora;)
Zeek2
8

Si desea crear un botón que se utiliza para una URL en cualquier lugar, cree una clase de botón para un ancla.

a.button {
    background-color: #999999;
    color: #FFFFFF !important;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    padding: 5px 8px;
    text-align: center;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.button:hover {
    text-decoration: none;
}
Maarek
fuente
7

Sé que se han enviado muchas respuestas, pero ninguna de ellas parecía realmente resolver el problema. Aquí está mi opinión sobre una solución:

  1. Use el <form method="get">método con el que está comenzando el OP. Esto funciona muy bien, pero a veces agrega un ?a la URL. El ?es el principal problema.
  2. Use jQuery / JavaScript para hacer el siguiente enlace cuando JavaScript esté habilitado para que ?no termine agregado a la URL. Se recurrirá sin problemas al <form>método para la fracción muy pequeña de usuarios que no tienen habilitado JavaScript.
  3. El código JavaScript utiliza la delegación de eventos para que pueda adjuntar un detector de eventos antes de <form>o<button> siquiera existe. Estoy usando jQuery en este ejemplo, porque es rápido y fácil, pero también se puede hacer en JavaScript 'vainilla'.
  4. El código JavaScript evita que suceda la acción predeterminada y luego sigue el enlace dado en el <form> actionatributo.

Ejemplo de JSBin (el fragmento de código no puede seguir enlaces)

// Listen for any clicks on an element in the document with the `link` class
$(document).on('click', '.link', function(e) {
    // Prevent the default action (e.g. submit the form)
    e.preventDefault();

    // Get the URL specified in the form
    var url = e.target.parentElement.action;
    window.location = url;
});
<!DOCTYPE html>
<html>

    <head>
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <meta charset="utf-8">
        <title>Form buttons as links</title>
    </head>

    <body>
        <!-- Set `action` to the URL you want the button to go to -->
        <form method="get" action="http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link">
            <!-- Add the class `link` to the button for the event listener -->
            <button type="submit" class="link">Link</button>
        </form>
    </body>

</html>

pseudosavant
fuente
7

7 maneras de hacer eso:

  1. Utilizando window.location.href = 'URL'
  2. Utilizando window.location.replace('URL')
  3. Utilizando window.location = 'URL'
  4. Utilizando window.open('URL')
  5. Utilizando window.location.assign('URL')
  6. Usando formulario HTML
  7. El uso de HTML ancla etiqueta

<!-- Using window.location.href = 'URL' -->
<button onclick='window.location.href = "https://stackoverflow.com"'>
  Click Me
</button>

<!-- Using window.location.replace('URL') -->
<button onclick='window.location.replace("https://stackoverflow.com")'>
  Click Me
</button>

<!-- Using window.location = 'URL' -->
<button onclick='window.location = "https://stackoverflow.com"'>
  Click Me
</button>

<!-- Using window.open('URL') -->
<button onclick='window.open("https://stackoverflow.com","_self","","")'>
  Click Me
</button>

<!-- Using window.location.assign('URL') -->
<button onclick='window.location.assign("http://www.stackoverflow.com")'>
  Click Me
</button>

<!-- Using HTML form -->
<form action='https://stackoverflow.com' method='get'>
  <input type='submit' value='Click Me'/>
</form>

<!-- Using HTML anchor tag -->
<a href='https://stackoverflow.com'>
  <button>Click Me</button>
</a>

Adnan Toky
fuente
4

Para HTML 5 y botón con estilo junto con fondo de imagen

<a id="Navigate" href="http://www.google.com">
  <input 
    type="button"
    id="NavigateButton"
    style="
      background-image: url(http://cdn3.blogsdna.com/wp-content/uploads/2010/03/Windows-Phone-7-Series-Icons-Pack.png);
      background-repeat: no-repeat;
      background-position: -272px -112px;
      cursor:pointer;
      height: 40px;
      width: 40px;
      border-radius: 26px;
      border-style: solid;
      border-color:#000;
      border-width: 3px;" title="Navigate"
    />
</a>

Anees Hameed
fuente
55
No valida Pegar en validator.w3.org/nu/#textarea da un error: la entrada del elemento no debe aparecer como un descendiente del elemento a.
Mark Amery
3

También puedes usar un botón:

Por ejemplo, en la sintaxis de ASP.NET Core :

// Some other tags
 <form method="post">
      <input asp-for="YourModelPropertyOrYourMethodInputName"
      value="@TheValue" type="hidden" />
      <button type="submit" class="link-button" formaction="/TheDestinationController/TheDestinationActionMethod">
      @(TextValue)
      </button>
  </form>
// Other tags...


<style>
       .link-button {
        background: none !important;
        border: none;
        padding: 0 !important;
        color: #20a8d8;
        cursor: pointer;
    }
</style>
Elnaz
fuente
3

si está utilizando un certificado SSL

<a href="https://www.google.com" target="_blank"><button>Click me !</button></a>
Vikash Chauhan
fuente
2

Las personas que respondieron utilizando <a></a>atributos en un <button></button>fueron útiles.

PERO , recientemente, encontré un problema cuando utilicé un enlace dentro de a <form></form>.

El botón ahora se considera como / como un botón de envío (HTML5). He intentado trabajar un poco y he encontrado este método.

Cree un botón de estilo CSS como el siguiente:

.btn-style{
    border : solid 1px #0088cc;
    border-radius : 6px;
    moz-border-radius : 6px;
    -webkit-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    -moz-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    font-size : 18px;
    color : #696869;
    padding : 1px 17px;
    background : #eeeeee;
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(49%,#eeeeee), color-stop(72%,#cccccc), color-stop(100%,#eeeeee));
    background : -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -webkit-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -o-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -ms-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );

}

O cree uno nuevo aquí: CSS Button Generator

Y luego cree su enlace con una etiqueta de clase con el nombre del estilo CSS que ha creado:

<a href='link.php' class='btn-style'>Link</a>

Aquí hay un violín:

JS Fiddle

Logan Wayne
fuente
3
Configure el botón type = "button", que le permitirá hacer clic en él sin enviar el formulario.
Blake A. Nichols
2

¡Utilicé esto para un sitio web en el que estoy trabajando actualmente y funciona muy bien! Si también quieres un estilo genial, pondré el CSS aquí.

input[type="submit"] {
  background-color: white;
  width: 200px;
  border: 3px solid #c9c9c9;
  font-size: 24pt;
  margin: 5px;
  color: #969696;
}

input[type="submit"]:hover {
  color: white;
  background-color: #969696;
  transition: color 0.2s 0.05s ease;
  transition: background-color 0.2s 0.05s ease;
  cursor: pointer;
}
<input type="submit" name="submit" onClick="window.location= 'http://example.com'">

Trabajando JSFiddle aquí .

Jasch1
fuente
2

También puede establecer los botones type-propertyen "botón" (hace que no envíe el formulario) y luego anidarlo dentro de un enlace (hace que redirija al usuario).

De esta manera, podría tener otro botón en el mismo formulario que envía el formulario, en caso de que sea necesario. También creo que esto es preferible en la mayoría de los casos en lugar de configurar el método y la acción del formulario como un enlace (a menos que sea un formulario de búsqueda, supongo ...)

Ejemplo:

<form method="POST" action="/SomePath">
  <input type="text" name="somefield" />
  <a href="www.target.com"><button type="button">Go to Target!</button></a>
  <button type="submit">submit form</button>
</form>

De esta manera, el primer botón redirige al usuario, mientras que el segundo envía el formulario.

Tenga cuidado de asegurarse de que el botón no active ninguna acción, ya que eso generará un conflicto. Además, como señaló Arius, debe tener en cuenta que, por la razón anterior, esto no se considera estrictamente HTML válido, de acuerdo con el estándar. Sin embargo, funciona como se esperaba en Firefox y Chrome, pero aún no lo he probado para Internet Explorer.

Anders Martini
fuente
2
El elemento 'botón' no se puede anidar dentro del elemento 'a'.
Arius
de acuerdo con el estándar no, pero en mi experiencia esto funciona bien. Todavía no lo he probado ampliamente en todos los navegadores, pero al menos FF y Chrome parecen manejarlo bien, con el comportamiento esperado.
Anders Martini
Arius: leyó un poco, experimentó un poco más y descubrió que un elemento de botón puede de hecho estar anidado dentro de un elemento <a>, siempre que el elemento de botón no tenga su propia acción aplicada (ya que eso obviamente resultaría en un conflicto: ¿qué acción realizará el navegador? ¿Los botones o los <a> 's?), pero siempre y cuando se asegure de que el elemento del botón en sí no desencadene ninguna acción una vez que se haga clic, esto debería funcionar bien (probablemente no debería Sin embargo, se considera una mejor práctica)
Anders Martini
44
No se trata de posibilidad. Esto está solo en contra de la especificación HTML5 y eso es todo.
Arius
1

Puedes usar javascript:

<html>
<button onclick='window.location = "http://www.google.com"'>
            Google
        </button>

</html>

Reemplace http://www.google.comcon su sitio web, asegúrese de incluir http://antes de la URL.

Hayz
fuente
1

En JavaScript

setLocation(base: string) {
  window.location.href = base;
}

En HTML

<button onclick="setLocation('/<whatever>')>GO</button>"
Joshua Michael Waggoner
fuente
1

Escribe window.locationy presiona enteren la consola de tu navegador. Entonces puedes tener una idea clara de lo que locationcontiene

   hash: ""
   host: "stackoverflow.com"
   hostname: "stackoverflow.com"
   href: "/programming/2906582/how-to-create-an-html-button- 
   that-acts-like-a-link"
   origin: "https://stackoverflow.com"
   pathname: "/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link"
   port: ""
   protocol: "https:"

Puede establecer cualquier valor desde aquí.

Entonces, para redirigir otra página, puede establecer el hrefvalor con su enlace.

   window.location.href = your link

En tu caso-

   <button onclick="window.location.href='www.google.com'">Google</button>
Nasir Khan
fuente
0

Si lo que necesita es que se verá como un botón, con énfasis en la imagen de degradado , puede hacer esto:

<a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>
ilans
fuente
0

Si desea redirigir las páginas que residen dentro de su sitio web, entonces este es mi método: agregué el atributo href al botón y onclick asignó this.getAttribute ('href') a document.location.href

** No funcionará si hace referencia a URL fuera de su dominio debido a 'X-Frame-Options' a 'sameorigin'.

Código de muestra:

<button onclick="document.location.href=this.getAttribute('href');" href="/">Home</button>
Meir Gabay
fuente