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

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>

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.

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

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) :

Apariencia de muestra de Bootstrap (v3) :

Apariencia de muestra Bootstrap (v2) :

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.

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

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.

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>

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

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.

¿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

Simplemente puede poner una etiqueta alrededor del elemento:

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

https://jsfiddle.net/hj6gob8b/

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.

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 .

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

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

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

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

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

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

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

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

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;
}

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>

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>

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>

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>

si está utilizando un certificado SSL

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

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

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

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.

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.

En JavaScript

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

En HTML

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

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>

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>

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>