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

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.

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

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

Arranque (v4) apariencia de la muestra:

Arranque (v3) apariencia de la muestra:

Arranque (v2) apariencia de la muestra:

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.

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

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.

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>

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

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

Para Concluir

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.

¿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
|||| |||| -principal.html
|||| |||| -secundario.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.

Simplemente puede poner una etiqueta alrededor del elemento:

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

https://jsfiddle.net/hj6gob8b/

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 jsviolín 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).

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

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

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

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

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.

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.

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

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

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

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

Sé que se han enviado muchas respuestas, pero ninguna parece resolver realmente 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. 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>

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>

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>

si está utilizando un certificado SSL

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

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

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

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.

Puedes usar javascript:

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

</html>

Reemplaza http://www.google.com con 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>"

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>

Intente

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

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>