Como criar um botão HTML que funciona como um link?

Gostaria de criar um botão HTML que funciona como um link. Então, quando você clica no botão, ele é redirecionado para uma página. Eu gostaria que fosse o mais acessível possível.

Também gostaria que não houvesse caracteres extras ou parâmetros no URL.

Como posso conseguir isso?

Com base nas respostas postadas até agora, atualmente estou fazendo o seguinte:

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

mas o problema é que, no Safari e no Internet Explorer , ele adiciona um caractere de ponto de interrogação ao final do URL. Preciso encontrar uma solução que não adicione caracteres ao final da URL.

Existem duas outras soluções para fazer isso: usar JavaScript ou estilizar um link para parecer um botão.

Usando JavaScript:

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

Mas isso obviamente requer JavaScript e, por esse motivo, é menos acessível aos leitores de tela. O objetivo de um link é ir para outra página. Portanto, tentar fazer um botão agir como um link é a solução errada. Minha sugestão é que você use um link e estilize-o para parecer um botão .

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

HTML

A maneira simples de HTML é colocá-lo em um local em <form>que você especifica o URL de destino desejado no actionatributo.

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

Se necessário, defina CSS display: inline;no formulário para mantê-lo no fluxo com o texto ao redor. Em vez do <input type="submit">exemplo acima, você também pode usar <button type="submit">. A única diferença é que o <button>elemento permite filhos.

Você esperaria intuitivamente poder usar <button href="https://google.com">analogicamente com o <a>elemento, mas infelizmente não, esse atributo não existe de acordo com a especificação HTML .

CSS

Se o CSS for permitido, basta usar um <a>estilo para parecer um botão, usando, entre outros, a appearancepropriedade ( ela não é suportada apenas no 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;
}

Ou escolha uma dessas muitas bibliotecas CSS como o Bootstrap .

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

Javascript

Se o JavaScript for permitido, defina o window.location.href.

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

Em vez do <input type="button">exemplo acima, você também pode usar <button>. A única diferença é que o <button>elemento permite filhos.

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

Observe que o type="button"atributo é importante, pois seu valor ausente padrão é o estado do botão Enviar .

Se for a aparência visual de um botão que você está procurando em uma tag âncora HTML básica, poderá usar a estrutura do Twitter Bootstrap para formatar qualquer um dos seguintes links / botões comuns do tipo HTML para aparecer como um botão. Observe as diferenças visuais entre as versões 2, 3 ou 4 da estrutura:

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

Aparência da amostra do Bootstrap (v4) :

Aparência da amostra do Bootstrap (v3) :

Aparência da amostra do Bootstrap (v2) :

Usar:

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

Infelizmente, essa marcação não é mais válida no HTML5 e nem será validada nem sempre funcionará como o potencial esperado. Use outra abordagem.

No HTML5, os botões suportam o formactionatributo. O melhor de tudo é que não é necessário Javascript ou truque.

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

Ressalvas

• Deve estar cercado por <form>tags.
• <button>tipo deve ser "enviar" (ou não especificado), não consegui fazê-lo funcionar com o tipo "botão". O que traz o ponto abaixo.
• Substitui a ação padrão em um formulário. Em outras palavras, se você fizer isso de outra forma, isso causará um conflito.

Referência: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction Suporte ao navegador: https://developer.mozilla.org/en-US/docs/Web/ HTML / elemento / botão # Browser_compatibility

É realmente muito simples e sem usar nenhum elemento de formulário. Você pode simplesmente usar a tag <a> com um botão dentro :).

Como isso:

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

E ele carregará o href na mesma página. Quer uma nova página? Basta usar target="_blank".

EDITAR

Alguns anos depois, enquanto minha solução ainda funciona, lembre-se de que você pode usar muito CSS para fazer com que ela pareça o que quiser. Esta foi apenas uma maneira rápida.

Se você estiver usando um formulário interno, adicione o atributo type = "reset" junto com o elemento button. Isso impedirá a ação do formulário.

<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 haver três soluções para esse problema (todas com prós e contras).

Solução 1: Botão em um formulário.

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

Mas o problema é que, em algumas versões de navegadores populares como Chrome, Safari e Internet Explorer, ele adiciona um caractere de ponto de interrogação ao final do URL. Portanto, em outras palavras, o código acima do seu URL terá a seguinte aparência:

http://someserver/pages2?

Há uma maneira de corrigir isso, mas isso exigirá configuração do lado do servidor. Um exemplo usando o Apache Mod_rewrite seria redirecionar todas as solicitações com uma trilha ?para a URL correspondente sem a ?. Aqui está um exemplo usando .htaccess, mas há um tópico completo aqui :

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

Configurações semelhantes podem variar dependendo do servidor da web e da pilha usada. Portanto, um resumo dessa abordagem:

Prós:

1. Este é um botão real e semanticamente faz sentido.
2. Por ser um botão real, ele também atuará como um botão real (por exemplo, comportamento arrastável e / ou imitar um clique ao pressionar a barra de espaço quando ativo).
3. Sem JavaScript, sem estilo complexo necessário.

Contras:

1. O rastreamento ?parece feio em alguns navegadores. Isso pode ser corrigido por um hack (em alguns casos) usando POST em vez de GET, mas a maneira mais limpa é ter um redirecionamento do servidor. A desvantagem com o redirecionamento do lado do servidor é que ele causará uma chamada HTTP extra para esses links devido ao redirecionamento 304.
2. Adiciona <form>elemento extra
3. O posicionamento do elemento ao usar vários formulários pode ser complicado e se torna ainda pior ao lidar com projetos responsivos. É possível obter algum layout com esta solução, dependendo da ordem dos elementos. Isso pode afetar a usabilidade se o design for impactado por esse desafio.

Solução 2: usando JavaScript.

Você pode usar o JavaScript para acionar o onclick e outros eventos para imitar o comportamento de um link usando um botão. O exemplo abaixo pode ser aprimorado e removido do HTML, mas existe apenas para ilustrar a ideia:

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

Prós:

1. Simples (para requisito básico) e mantenha a semântica, sem exigir um formulário extra.
2. Por ser um botão real, ele também atuará como um botão real (por exemplo, comportamento arrastável e / ou imitar um clique ao pressionar a barra de espaço quando ativo).

Contras:

1. Requer JavaScript, o que significa menos acessível. Isso não é ideal para um elemento básico (núcleo), como um link.

Solução 3: Anchor (link) estilizado como um botão.

Criar um link como um botão é relativamente fácil e pode fornecer uma experiência semelhante em diferentes navegadores. O Bootstrap faz isso, mas também é fácil de conseguir sozinho, usando estilos simples.

Prós:

1. Suporte simples (para requisitos básicos) e bom entre navegadores.
2. Não precisa de um <form>para trabalhar.
3. Não precisa de JavaScript para funcionar.

Contras:

1. A semântica está meio que quebrada, porque você deseja um botão que atue como um link e não um link que atue como um botão.
2. Não reproduzirá todos os comportamentos da solução nº 1. Não suporta o mesmo comportamento que o botão. Por exemplo, os links reagem de maneira diferente quando arrastados. Além disso, o acionador do link "barra de espaço" não funcionará sem algum código JavaScript extra. Isso adicionará muita complexidade, pois os navegadores não são consistentes em como eles suportam keypresseventos nos botões.

Conclusão

A solução 1 ( botão em um formulário ) parece ser a mais transparente para usuários com o mínimo de trabalho necessário. Se o seu layout não for impactado por essa opção e o ajuste do servidor for possível, essa é uma boa opção para os casos em que a acessibilidade é a principal prioridade (por exemplo, links em uma página de erro ou mensagens de erro).

Se o JavaScript não for um obstáculo para os seus requisitos de acessibilidade, a solução 2 ( JavaScript ) será preferida às 1 e 3.

Se, por algum motivo, a acessibilidade for vital (JavaScript não é uma opção), mas você estiver em uma situação em que seu design e / ou a configuração do servidor o impedem de usar a opção 1, a solução 3 ( Anchor no estilo de um botão ) é uma boa alternativa resolver esse problema com o mínimo impacto na usabilidade.

Por que não colocar o botão dentro de uma etiqueta de referência, por exemplo

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

Isso parece funcionar perfeitamente para mim e não adiciona% 20 tags ao link, exatamente como você deseja. Eu usei um link para o Google para demonstrar.

Obviamente, você pode agrupar isso em uma tag de formulário, mas não é necessário.

Ao vincular outro arquivo local, basta colocá-lo na mesma pasta e adicionar o nome do arquivo como referência. Ou especifique o local do arquivo se in não estiver na mesma pasta.

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

Isso também não adiciona nenhum caractere ao final da URL; no entanto, ele possui o caminho do projeto de arquivos como o URL antes de terminar com o nome do arquivo. por exemplo

Se a estrutura do meu projeto fosse ...

.. indica uma pasta - indica um arquivo enquanto quatro | denotar um subdiretório ou arquivo na pasta pai

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

Se eu abrir main.html, o URL será,

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

No entanto, ao clicar no botão dentro de main.html para mudar para secundário.html, o URL seria:

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

Nenhum caractere especial incluído no final do URL. Eu espero que isso ajude. A propósito - (% 20 indica um espaço em um URL codificado e inserido no lugar deles).

Nota: O localhost: 0000 obviamente não será 0000, você terá seu próprio número de porta lá.

Além disso, o? _Ijt = xxxxxxxxxxxxxx no final do URL main.html, x é determinado por sua própria conexão, portanto, obviamente, não será igual ao meu.

Pode parecer que estou afirmando alguns pontos realmente básicos, mas só quero explicar da melhor maneira possível. Obrigado pela leitura e espero que isso ajude alguém, no mínimo. Feliz programação.

Você pode simplesmente colocar uma tag em torno do elemento:

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

https://jsfiddle.net/hj6gob8b/

A única maneira de fazer isso (exceto a idéia engenhosa do BalusC!) É adicionar um onclickevento JavaScript ao botão, o que não é bom para a acessibilidade.

Você já pensou em criar um link normal como um botão? Você não pode obter botões específicos do SO dessa maneira, mas ainda é a melhor maneira de IMO.

Seguindo o que algumas outras pessoas adicionaram, você pode ir à loucura usando apenas uma classe CSS simples, sem PHP, sem código jQuery , apenas HTML e CSS simples.

Crie uma classe CSS e adicione-a à sua âncora. O código está abaixo.

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

É isso. É muito fácil de fazer e permite que você seja tão criativo quanto quiser. Você controla as cores, o tamanho, as formas (raio) etc. Para obter mais detalhes, consulte o site em que encontrei isso .

Se você quiser evitar ter que usar um formulário ou uma entrada e estiver procurando por um link com aparência de botão, poderá criar links de aparência com um wrapper div, uma âncora e uma h1tag. Você poderia querer isso potencialmente para poder colocar livremente o botão de link em sua página. Isso é especialmente útil para centralizar botões horizontalmente e ter um texto centralizado verticalmente dentro deles. Aqui está como:

Seu botão será composto de três partes aninhadas: um invólucro div, uma âncora e um h1, da seguinte forma:

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

Aqui está um jsFiddle para verificá-lo e brincar com ele.

Benefícios desta configuração: 1. Tornar o invólucro div exibido: o bloco facilita o centro (usando a margem: 0 automático) e a posição (enquanto um <a> está embutido e é mais difícil de posicionar e não é possível centralizar).

2. Você pode simplesmente fazer a <a> exibição: bloquear, movê-la e estilizá-la como um botão, mas o alinhamento vertical do texto dentro dela fica difícil.

3. Isso permite que você faça o <a> display: inline-table e o <h1> display: table-cell, que permite usar o alinhamento vertical: meio no <h1> e centralizá-lo na vertical (o que é sempre bom em um botão). Sim, você pode usar o preenchimento, mas se quiser que o botão seja redimensionado dinamicamente, isso não será tão limpo.

4. Às vezes, quando você insere um <a> em uma div, apenas o texto é clicável, essa configuração torna o botão inteiro clicável.

5. Você não precisa lidar com formulários se estiver apenas tentando mudar para outra página. Os formulários destinam-se a inserir informações e devem ser reservados para isso.

6. Permite separar de maneira limpa o estilo dos botões e o texto (vantagem de alongamento? Claro, mas o CSS pode ter uma aparência desagradável, por isso é bom decompô-lo).

Definitivamente, tornou minha vida mais fácil criar um site móvel para telas de tamanho variável.

@ Nicolas, o seguinte funcionou para mim, pois o seu não tinha, type="button"devido ao qual começou a se comportar como tipo de envio ... uma vez que eu já tenho um tipo de envio. Não funcionou para mim .... e agora você pode adicionar classe botão ou <a>para obter o layout necessário:

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

Outra opção é criar um link no botão:

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

Em seguida, use CSS para estilizar o link e o botão, para que o link ocupe todo o espaço dentro do botão (para que o usuário não faça nenhum erro ao clicar):

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

Eu criei uma demonstração aqui .

Se você deseja criar um botão usado para uma URL em qualquer lugar, crie uma classe de botão para uma âncora.

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

Sei que muitas respostas foram enviadas, mas nenhuma delas parecia realmente resolver o problema. Aqui está a minha opinião sobre uma solução:

1. Use o <form method="get">método que o OP está começando. Isso funciona muito bem, mas às vezes anexa ?a ao URL. O ?é o principal problema.
2. Use jQuery / JavaScript para fazer o link a seguir quando o JavaScript estiver ativado, para que ?não seja anexado ao URL. Ele utilizará o <form>método para uma fração muito pequena de usuários que não têm o JavaScript ativado.
3. O código JavaScript usa delegação de eventos para que você possa anexar um ouvinte de evento antes que ele exista <form>ou <button>até exista. Estou usando o jQuery neste exemplo, porque é rápido e fácil, mas também pode ser feito no JavaScript 'vanilla'.
4. O código JavaScript impede que a ação padrão aconteça e segue o link fornecido no <form> actionatributo.

Exemplo JSBin (o snippet de código não pode seguir os links)

// 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 maneiras de fazer isso:

1. Usando window.location.href = 'URL'
2. Usando window.location.replace('URL')
3. Usando window.location = 'URL'
4. Usando window.open('URL')
5. Usando window.location.assign('URL')
6. Usando formulário HTML
7. Usando tag âncora HTML

<!-- 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 e botão estilizado, juntamente com o plano de fundo da imagem

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

Além disso, você pode usar um botão:

Por exemplo, na sintaxe do 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>

se você estiver usando certificado SSL

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

As pessoas que responderam usando <a></a>atributos em um <button></button>foi útil.

MAS , recentemente, encontrei um problema quando usei um link dentro de um <form></form>.

O botão agora é considerado como / como um botão de envio (HTML5). Eu tentei trabalhar uma maneira de contornar, e encontrei este método.

Crie um botão de estilo CSS como o abaixo:

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

}

Ou crie um novo aqui: CSS Button Generator

E, em seguida, crie seu link com uma tag de classe com o nome do estilo CSS que você criou:

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

Aqui está um violino:

JS Fiddle

Eu usei isso em um site no qual estou trabalhando atualmente e funciona muito bem! Se você quiser um estilo legal também, colocarei o CSS aqui.

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

Trabalhando JSFiddle aqui .

Você também pode definir os botões type-propertypara "botão" (não envia o formulário) e depois aninha-lo em um link (redireciona o usuário).

Dessa forma, você pode ter outro botão no mesmo formulário que envia o formulário, caso necessário. Também acho que isso é preferível na maioria dos casos, em vez de definir o método e a ação do formulário como um link (a menos que seja um formulário de pesquisa, eu acho ...)

Exemplo:

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

Dessa forma, o primeiro botão redireciona o usuário, enquanto o segundo envia o formulário.

Tenha cuidado para garantir que o botão não desencadeie nenhuma ação, pois isso resultará em conflito. Além disso, como Arius apontou, você deve estar ciente de que, pelo motivo acima, isso não é estritamente considerado HTML válido, de acordo com o padrão. No entanto, funciona como esperado no Firefox e Chrome, mas ainda não o testei para o Internet Explorer.

Você pode usar o javascript:

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

</html>

Substitua http://www.google.compelo seu site, inclua http://antes do URL.

Em JavaScript

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

Em HTML

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

Digite window.locatione pressione enterno console do navegador. Então você pode ter uma idéia clara do que locationcontém

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

Você pode definir qualquer valor a partir daqui.

Então, para redirecionar outra página, você pode definir o hrefvalor com o seu link.

   window.location.href = your link

No seu caso-

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

Se o que você precisa é que ele se pareça com um botão, com ênfase na imagem gradiente , você pode fazer o seguinte:

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

Se você deseja redirecionar para páginas que residem no seu site, eis o meu método - adicionei o atributo href ao botão e clique em atribuir this.getAttribute ('href') a document.location.href

** Não funcionará se você consultar URLs fora do seu domínio por causa de 'X-Frame-Options' para 'sameorigin'.

Código de amostra:

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