¿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. Entonces, cuando hace 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 haya caracteres o parámetros adicionales en la URL.

¿Cómo puedo conseguir esto?


Según las respuestas publicadas hasta ahora, actualmente estoy haciendo esto:

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

pero el problema con esto es que en Safari y los explorador de Internet, agrega un carácter de 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 esa razón es menos accesible para los lectores de pantalla. El objetivo de un enlace es ir a otra página. Así que intentar hacer que un botón actúe como un enlace es la solución incorrecta. Mi sugerencia es que utilice un enlace y ajústelo para que parezca un botón.

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

preguntado el 25 de mayo de 10 a las 16:05

Cambie OBTENER a POST. Nadie parece haber abordado el primer problema del OP, que fue el ? en la URL. Esto se debe a que la forma es type="GET", cambia 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 Esto funciona en un contexto en el que no eres estricto sobre el método que aceptas para tus páginas. En un contexto en el que rechaza publicaciones en páginas que esperan GET fallará. Sigo pensando que usar un enlace tiene sentido con la advertencia de que no reaccionará a la "barra espaciadora" cuando esté activo el botón como lo hace. Además, algunos estilos y comportamientos serán diferentes (como arrastrar). Si desea la verdadera experiencia de "enlace de botón", tener redireccionamientos del lado del servidor para la terminación de URL por ? eliminarlo también podría ser una opción. -

cssbuttongenerator.com puede ser útil si desea crear un botón con css. -

Creo que es mejor crear un enlace que parezca un botón.

Solo una nota, para mí, "el botón actúa como un enlace" significa que puedo hacer clic con el botón derecho y decidir si abrir en una nueva pestaña / ventana, que no funciona con las soluciones JS ... -

30 Respuestas

HTML

La forma simple de HTML es ponerlo en un <form> en el que especifica la URL de destino deseada en el action atributo.

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

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

Intuitivamente esperaría poder usar <button href="https://google.com"> análogo al <a> elemento, pero lamentablemente no, este atributo no existe según Especificación de HTML.

CO

Si se permite CSS, simplemente use un <a> que diseña para que parezca un botón usando, entre otros, el appearance propiedad (solo que 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 de <input type="button"> en el ejemplo anterior, también puede utilizar <button>. La única diferencia es que el <button> elemento permite a los niños.

respondido 19 mar '20, 11:03

Sencillo y agradable. Una buena solución. Agregar display: inline al formulario para mantener el botón en el flujo. - Pekka

en safari, esto agrega un signo de interrogación al final de la URL ... ¿hay alguna forma de hacerlo que no agregue nada a la URL? - Andrés

@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

¿Soy solo yo o le falta a la etiqueta un atributo href obvio? - usuario1752532

Parece simple y agradable, pero puede tener efectos secundarios si no se considera adecuadamente. es decir, crear un segundo formulario en la página, formulario anidado, etc. Tejasvi Hegde

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

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

Respondido 11 Oct 19, 18:10

Parece que si no especifica type = "button", esto no siempre funcionará. Parece que el botón por defecto será "enviar" - kenitech

Si desea abrir el enlace en una nueva ventana / pestaña, use: onclick = "window.open ('example.com ',' _ en blanco '); "- bennos

@kenitech correcto, según especificaciones: "Los valor faltante predeterminado es la Enviar Button Expresar." - Niels Keurentjes

pero el usuario no puede hacer clic derecho para abrir en una nueva pestaña, para que eso funcione, necesita la etiqueta de anclaje - Irshu

Por favor, no hagas esto. Rompe muchas cosas, como el menú contextual del botón derecho para los enlaces. - Navin

Si lo que busca es la apariencia visual de un botón en una etiqueta de anclaje HTML básica, puede usar la Bootstrap de Twitter framework para formatear cualquiera de los siguientes enlaces / botones comunes de tipo HTML 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">

Bootstrap (v4) apariencia de la muestra:

Salida de muestra de los botones de Boostrap v4

Bootstrap (v3) apariencia de la muestra:

Salida de muestra de los botones de Boostrap v3

Bootstrap (v2) apariencia de la muestra:

Salida de muestra de los botones de Boostrap v2

Respondido 31 Oct 17, 19:10

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 usa Bootstrap es buena, sin embargo, usar Bootstrap parece excesivo. - Scottkellum

Uso:

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

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

Respondido 28 Oct 15, 23:10

A partir de HTML5, los botones admiten la formaction atributo. 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> las etiquetas.
  • <button> el tipo debe ser "enviar" (o no especificado), no pude hacerlo funcionar con el tipo "botón". Lo que trae a colación el punto a continuación.
  • Reemplaza la acción predeterminada en un formulario. En otras palabras, si hace esto dentro de otra forma, 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

Respondido 02 Abr '18, 16:04

Solo para completar la información: formaction es compatible desde "IE mundo"desde la versión 10 y por encima - Luca Detomi

@EternalHour Realmente curioso. En los ejemplos que usted y yo hemos proporcionado, ¿se supone que hay una diferencia apreciable entre el comportamiento de esas dos formas? En este caso específico no <button formaction> === <form action>? - pseudoavant

@pseudosavant: la diferencia es que su respuesta se basa en Javascript para funcionar. En esta solución, no se necesita Javascript, es HTML puro. - EternalHour

@EternalHour Lo siento, debería haber sido más claro. Obviamente, el JS hace que el mío sea diferente, pero es solo una mejora progresiva. El formulario todavía va a ese enlace sin el JS. Tenía curiosidad sobre el comportamiento previsto de solo el HTML <form>s en cada uno de nuestros ejemplos. Es formaction en un button se supone que debe agregar el ? a un envío GET vacío? En esto JSBin parece que el HTML se comporta exactamente igual para ambos. - pseudoavant

Es útil tener en cuenta que esto solo funciona cuando está envuelto por etiquetas de formulario. Encuéntralo por la vía difícil... - Adsy2010

En realidad, es muy simple y sin utilizar ningún elemento de formulario. Puedes usar la etiqueta con un botón adentro :).

Me gusta:

<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 usa target="_blank".

EDITAR

Un par de años después, aunque mi solución todavía funciona, tenga en cuenta que puede usar mucho CSS para que se vea como desee. Esta fue solo una forma rápida.

Respondido 27 ago 19, 13:08

Si bien esto funciona, no debe considerarse como una solución, sino como una solución alternativa porque si pasa este código a través del validador W3C, obtendrá errores. - Hyder B.

Sí, Hyder B. tiene razón, pero también debe tener en cuenta que los estándares son solo guías crudas. 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

Deberías usar <button type="button">... para que no funcione por defecto como Enviar - Stephen R

Si está utilizando un formulario interno, agregue el atributo type = "reiniciar" 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>

Respondido 28 Oct 15, 23:10

Solo si quieres que restablezca tu formulario. Usar type="button" - Stephen R

<form>
    <input type="button" value="Home Page" onclick="window.location.href='http://www.wherever.com'"> 
</form>

Respondido 21 Jul 20, 16:07

@Robusto ese fue un comentario sarcástico sobre el espacio vacío que solía estar allí :) Esto es no una buena solución en mi opinión, ya que no funcionará sin JavaScript. - Pekka

@Pekka: sí, y tampoco es xhtml bien formado - Sean Patrick Floyd

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 input no tiene una etiqueta final. - Peter Mortensen

@PeterMortensen Según el Especificación HTML,la input elemento es un elemento vacío. Debe tener una etiqueta de inicio, pero no debe tener una etiqueta de finalización. - ghoppe

Parece haber tres soluciones a este problema (todas con pros y contras).

Solución 1: Botón en un formulario.

<form method="get" action="/es/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. Entonces, en otras palabras, el código que se encuentra arriba de su URL terminará luciendo así:

http://someserver/pages2?

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

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

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

Pros:

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

Contras:

  1. arrastrando ? se ve feo en algunos navegadores. Esto se puede solucionar mediante un truco (en algunos casos) usando POST en lugar de GET, pero la forma limpia es tener una redirección del lado del servidor. La desventaja de la redirección del lado del servidor es que provocará una llamada HTTP adicional para estos enlaces debido a la redirección 304.
  2. Agrega extra <form> elementos
  3. El posicionamiento de elementos cuando se utilizan varios formularios puede ser complicado y empeora aún más cuando se trata de diseños adaptables. Algunos diseños pueden volverse imposibles de lograr 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: usar JavaScript.

Puede usar JavaScript para activar onclick y otros eventos para imitar el comportamiento de un enlace usando 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 el requisito básico) y mantén la semántica sin requerir una forma adicional.
  2. Dado que es un botón real, también actuará como un botón real (por ejemplo, comportamiento que se puede arrastrar 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 su cuenta usando estilos simples.

Pros:

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

Contras:

  1. La semántica está algo 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 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 de la "barra espaciadora" no funcionará sin un código JavaScript adicional. Agregará mucha complejidad ya que los navegadores no son consistentes en cómo admiten keypress eventos en botones.

Conclusión

Solución # 1 (Botón en una forma) parece el más transparente para los usuarios que requieren un trabajo mínimo. 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 los 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, entonces la solución n. ° 2 (JavaScript) sería preferible a los números 1 y 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 # 1, entonces la solución # 3 (Ancla con estilo de botón) es una buena alternativa para resolver este problema con un impacto mínimo en la usabilidad.

Respondido el 20 de junio de 20 a las 12:06

¿Por qué no colocar el botón dentro de una etiqueta de referencia?

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

Esto parece funcionar perfectamente para mí y no agrega ninguna etiqueta% 20 al enlace, tal como lo desea. He utilizado un enlace a Google para demostrarlo.

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 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 fuera ...

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

..público
|||| ..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 localhost: 0000 obviamente no será 0000, tendrá su propio número de puerto allí.

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


Puede parecer que estoy estableciendo algunos puntos realmente básicos, pero solo quiero explicarlo lo mejor que pueda. Gracias por leer y espero que esto ayude a alguien como mínimo. Feliz programación.

Respondido 03 ago 18, 13:08

Simplemente puede poner una etiqueta alrededor del elemento:

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

https://jsfiddle.net/hj6gob8b/

Respondido el 22 de enero de 17 a las 19:01

No, no puedes. HTML prohíbe el anidamiento <button> dentro <a>. - Quentin

Esto es esencialmente lo mismo que esta respuesta de años antes. - Quentin

Si lo prohíbe, ¿por qué funciona? :) Ningún desarrollador serio presta atención 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 - Víctor de Urías

@UriahsVictor Puede que funcione hoy, pero algún día los proveedores de navegadores pueden decidir cambiar el comportamiento ya que no es válido. - Jacob

@UriahsVictor Flash y los applets de Java también eran bastante comunes. - Jacob

Si desea evitar tener que usar un formulario o una entrada y está buscando un enlace con apariencia de botón, puede crear enlaces de botón atractivos con un envoltorio div, un ancla y un h1 etiqueta. 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 los botones horizontalmente y tener texto centrado verticalmente dentro de ellos. Así es cómo:

Su botón estará compuesto por tres piezas anidadas: una envoltura 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í está a jsFiddle para comprobarlo y jugar con él.

Beneficios de esta configuración: 1. Hacer que el envoltorio div muestre: el bloque facilita el centrado (usando el margen: 0 automático) y la posición (mientras que an está en línea y es más difícil de colocar y no es posible centrar).

  1. Podrías simplemente hacer la pantalla: bloquearla, moverla y darle estilo como un botón, pero luego alinear verticalmente el texto dentro de ella se vuelve difícil.

  2. Esto le permite hacer la pantalla: inline-table y el display: table-cell, que le permite usar vertical-align: middle en el y céntrelo verticalmente (lo que 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 inserta un 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 de los botones y el estilo del texto entre sí (¿ventaja del estiramiento? Claro, 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.

respondido 25 nov., 19:19

De hecho, obtienes un botón razonable sin CSS en absoluto: Soren

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

¿Ha 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, en mi opinión.

Respondido 21 Jul 14, 19:07

Creo que no solo habla de funcionalidad (clic) sino también de apariencia. - Lógica web

@Web Logic sí, es por eso que estoy hablando de diseñar el enlace para que parezca un botón. - Pekka

@ChrisMarisic El uso de onClick tiene muchas desventajas: 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 los bots no podrán reconocer ni seguir el enlace; los navegadores con una función de "captación previa" no reconocerán el enlace; y muchos más. - Pekka

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 generalmente se reserva para ser específicamente sobre si los usuarios con discapacidad visual pueden operar bien su aplicación. - Chris Marisic

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

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

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

Respondido 21 Jul 14, 19:07

@ Nicolas, seguir me funcionó como el tuyo no lo hizo type="button" debido a lo cual comenzó a comportarse como tipo de envío ... dado que ya tengo un tipo de envío. no funcionó para mí ... y ahora puede agregar una clase al botón o al <a> para obtener el diseño requerido:

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

Respondido 23 Oct 17, 10:10

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 pierda el clic):

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

He creado un demo aquí.

Respondido el 16 de enero de 14 a las 09:01

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

Ambos tienen razón. 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

Si desea crear un botón que se utilice 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;
}

respondido 15 nov., 13:21

7 formas de hacer eso:

  1. Usar window.location.href = 'URL'
  2. Usar window.location.replace('URL')
  3. Usar window.location = 'URL'
  4. Usar window.open('URL')
  5. Usar window.location.assign('URL')
  6. Usando HTML utilizando el formulario
  7. Usando 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>

respondido 27 mar '19, 21:03

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

  1. Utilice 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. La ? es el principal problema.
  2. Esta solución funciona sin JavaScript habilitado. El respaldo agregará un ? sin embargo, hasta el final de la URL.
  3. Si JavaScript está habilitado, puede usar jQuery / JavaScript para seguir el enlace, de modo que ? no termina adjuntando a la URL. Recurrirá sin problemas al <form> método para una fracción muy pequeña de usuarios que no tienen habilitado JavaScript.
  4. El código JavaScript utiliza la delegación de eventos para que pueda adjuntar un detector de eventos antes del <form> or <button> incluso existir. Estoy usando jQuery en este ejemplo, porque es rápido y fácil, pero también se puede hacer en JavaScript 'vanilla'.
  5. El código JavaScript evita que suceda la acción predeterminada y luego sigue el enlace proporcionado en el <form> action atributo.

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>

Respondido el 01 de enero de 21 a las 01:01

Para HTML 5 y botón con estilo junto con el fondo de la 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>

Respondido 18 Abr '16, 09:04

No valida. Pegar en validator.w3.org/nu/#textarea da Error: la entrada del elemento no debe aparecer como descendiente del elemento a. - Mark Amery

También puedes usar un botón:

Por ejemplo, en 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="/es/TheDestinationController/TheDestinationActionMethod">
      @(TextValue)
      </button>
  </form>
// Other tags...


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

Respondido el 14 de enero de 17 a las 12:01

si está utilizando un certificado SSL

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

Respondido 02 ago 19, 16:08

Personas que han respondido usando <a></a> atributos en un <button></button> fue útil.

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

El botón ahora se considera como / como un botón de envío (HTML5). He intentado buscar una solución 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 crea uno nuevo aquí: Generador de botones CSS

Y luego crea tu enlace con un clase etiqueta con el nombre del estilo CSS que ha creado:

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

Aquí hay un violín:

JS violín

Respondido 23 Jul 14, 12:07

Establezca el tipo de botón = "botón", que le permitirá hacer clic en él sin enviar el formulario. - Blake A. Nichols

Usé 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í.

Respondido 25 Feb 19, 23:02

También puedes configurar los botones type-property al "botón" (hace que no envíe el formulario), y luego lo anida 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 a configurar el método de formulario y la acción para que sea un enlace (a menos que sea un formulario de búsqueda, supongo ...)

Ejemplo:

<form method="POST" action="/es/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 forma, 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 resultará en un conflicto. Además, como señaló Arius, debe tener en cuenta que, por la razón anterior, esto no se considera HTML válido estrictamente, 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.

Respondido 25 Feb 19, 23:02

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 en varios navegadores, pero al menos FF y Chrome parecen manejarlo bien, con el comportamiento esperado. - Martini es diferente

Arius: Leyó un poco, experimentó un poco más y descubrió que un elemento de botón de hecho puede estar anidado dentro de un elemento, siempre que el elemento de botón no tenga su propia acción aplicada (ya que eso obviamente resultaría en un conflicto, que acción ¿realizará el navegador? ¿los botones o los '?) pero siempre que se asegure de que el elemento del botón en sí no active ninguna acción una vez que se hace clic, esto debería funcionar bien (probablemente no debería considerarse una mejor práctica aunque) - Martini es diferente

No se trata de posibilidades. Esto va en contra de la especificación HTML5 y eso es todo. - Arius

Puedes usar javascript:

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

</html>

Replace http://www.google.com con su sitio web, asegúrese de incluir http:// antes de la URL.

Respondido 27 Feb 19, 20:02

En JavaScript

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

En HTML

<button onclick="setLocation('/<whatever>')>GO</button>"

contestado el 04 de mayo de 19 a las 08:05

Tipo window.location y pulse enter en la consola de su navegador. Entonces puedes tener una idea clara de lo que location contiene

   hash: ""
   host: "stackoverflow.com"
   hostname: "stackoverflow.com"
   href: "https://stackoverflow.com/questions/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 configurar href valor con su enlace.

   window.location.href = your link

En tu caso-

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

Respondido 02 Jul 19, 12:07

Trata

.abutton { 
  background: #bada55; padding: 5px; border-radius: 5px; 
  transition: 1s; text-decoration: none; color: black;
}
.abutton:hover { background: #2a2;  }
<a href="https://example.com" class="abutton">Continue</a>

Respondido el 28 de junio de 20 a las 14:06

Si lo que necesitas es que parezca un botón, con énfasis en la imagen de degradado, Puedes hacerlo:

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

respondido 09 nov., 14:18

Sin embargo, necesitará algún tipo de https: // o http: // antes de la URL. También puede vincular a archivos locales usando file: /// - maíz en la mazorca

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.