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

1909

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>
Andrew
fonte
38
Mude GET para POST. Parece que ninguém resolveu o primeiro problema do OP, que estava ?no URL. Isso é causado pelo formulário type="GET", altere para type="POST"e ?no final do URL desaparece. Isso ocorre porque o GET envia todas as variáveis ​​na URL, daí o ?.
Redefox05
11
@ redfox05 Isso funciona em um contexto em que você não é rígido quanto ao método que você aceita para suas páginas. Em um contexto em que você rejeita postagens em páginas que esperam GETque ela falhe. Eu ainda acho que usar um link faz sentido com a ressalva de que ele não reagirá à "barra de espaço" quando ativo, como o botão. Além disso, alguns estilos e comportamentos serão diferentes (como arrastáveis). Se você deseja a experiência "link do botão" verdadeira, ter redirecionamentos do lado do servidor para concluir o URL ?para removê-lo também pode ser uma opção.
Nicolas Bouvrette 15/05
1
cssbuttongenerator.com pode ser útil se você quiser criar um botão com css.
snow
1
Eu acho que é melhor do IADE para criar um link que parece um botão
yasar
1
Apenas uma nota, para mim "botão funciona como link" significa, que eu posso fazer clique com o botão direito e decidir se a abrir em nova aba / janela, que não está trabalhando com soluções JS ...
Betlista

Respostas:

2106

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.

BalusC
fonte
86
Simples e agradável. Uma boa solução. Adicione display: inlineao formulário para manter o botão no fluxo.
Pekka
13
no safari, isso adiciona um ponto de interrogação ao final do URL ... existe uma maneira de fazer isso que não adiciona nada ao URL?
25410 Andrew
11
@BalusC Ótima solução, mas se estiver dentro de algum outro formulário (formulário pai), pressionar esse botão redirecionará para o endereço no atributo de ação do formulário pai.
Vladimir
100
Sou eu ou a tag <button> está faltando um atributo href óbvio?
14
Parece simples e agradável, mas pode ter efeitos colaterais se não for considerado adequadamente. ou seja, criando o 2º formulário na página, formulário aninhado etc.
Tejasvi Hegde 16/01/15
598

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

Adão
fonte
1
@pinouchon Deve funcionar. janela está implícita. Poderia ser um bug IE9, stackoverflow.com/questions/7690645/...
Adam
12
Parece que se você não especificar type = "button", isso nem sempre funcionará. Parece que o botão será o padrão para "submeter"
kenitech
58
Se você deseja abrir o link em uma nova janela / guia, use: onclick = "window.open (' example.com', '_ blank' );"
Bennos
4
@kenitech correto, de acordo com as especificações : "O valor padrão ausente é o estado do botão Enviar ".
Niels Keurentjes
4
mas o usuário não pode clique direito abrir em nova guia, para que isso funcione, a necessidade de u a marca de âncora
Irshu
433

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

Saída de amostra dos botões do Boostrap v4

Aparência da amostra do Bootstrap (v3) :

Saída de amostra dos botões do Boostrap v3

Aparência da amostra do Bootstrap (v2) :

Saída de amostra dos botões do Boostrap v2

Berna
fonte
46
Parece um pouco exagerado em denominar um único botão, não? Com borda, preenchimento, plano de fundo e outros efeitos CSS, você pode estilizar botões e links para parecerem semelhantes sem trazer uma estrutura inteira. A metodologia usada pelo Bootstrap é boa, no entanto, o uso do Bootstrap parece excessivo.
Scottkellum
150

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.

RedFilter
fonte
59
@BalusC: Nem esta página
Robert Harvey
3
@ Rob: esse não é o meu problema :) Jogue no Meta e veja. No entanto, o targetatributo é imo na borda.
BalusC
128

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

EternalHour
fonte
5
Só para informação completa: formactioné compatível desde " IE mundo " desde a versão 10 e acima
Luca Detomi
1
@EternalHour Genuinamente curioso. Nos exemplos que você e eu fornecemos, deve haver uma diferença apreciável entre o comportamento dessas duas formas? Neste caso específico, <button formaction>=== <form action>?
Pseudosavant
2
@pseudosavant - A diferença é que sua resposta depende do Javascript para funcionar. Nesta solução, não é necessário Javascript, é HTML direto.
EternalHour
1
@EternalHour Desculpe, eu deveria ter sido mais claro. Obviamente, o JS torna o meu diferente, mas é apenas um aprimoramento progressivo. O formulário ainda vai para esse link sem o JS. Fiquei curioso sobre o comportamento pretendido apenas do HTML <form>s em cada um dos nossos exemplos. É formactionsobre um buttonsuposto adicionar o ?a uma submissão GET vazio? Neste JSBin , parece que o HTML se comporta exatamente da mesma forma para ambos.
Pseudosavant 05/10
2
É útil observar que isso só funciona quando envolvido por tags de formulário. Descobri isso da maneira mais difícil ...
Adsy2010
57

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

Lucian Minea
fonte
18
Enquanto isso funciona, não deve ser considerado uma solução, mas uma solução alternativa, porque se você passar esse código pelo validador W3C, obterá erros.
Hyder B.
7
Sim, Hyder B. você está certo, mas você também deve ter em mente que os padrões são apenas guias brutos. Como programador, você deve sempre pensar fora da caixa e tentar coisas que não estão no livro;).
Lucian Minea
NUNCA envolva outras âncoras ou elementos de ação de formulário na âncora.
Roko C. Buljan
Aha, e por que isso?
Lucian Minea
Você deve usar <button type="button">...para que ele não funcione por padrão como um envio
Stephen R
39

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>
saravanabawa
fonte
Somente se você deseja redefinir seu formulário. Usetype="button"
Stephen R
27
<form>
    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'"> 
</form>
ghoppe
fonte
8
@ Robusto, que foi um comentário sarcástico sobre o espaço vazio que costumava estar lá :) Esta não é uma boa solução IMO, pois não funcionará sem JavaScript.
Pekka
1
Xhtml sim, e também não é mesmo bem formado: @Pekka
Sean Patrick Floyd
8
se estiver usando o formulário, basta usar um envio, se estiver usando onclick, por que se preocupar com o formulário. -1
NimChimpsky
Não é um HTML bem formado. A tag inputnão possui uma tag final.
Peter Mortensen
10
@PeterMortensen De acordo com a especificação HTML , o inputelemento é um elemento nulo. Ele deve ter uma tag inicial, mas não deve ter uma tag final.
ghoppe
27

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.

Nicolas Bouvrette
fonte
21

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.

C.Gadd
fonte
19

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/

Uriahs Victor
fonte
10
Não, você não pode. O HTML proíbe o aninhamento <button>interno <a>.
Quentin
6
É essencialmente o mesmo que esta resposta de anos anteriores .
Quentin
2
Se o proíbe, por que funciona? :) Nenhum desenvolvedor sério toma cuidado de validador tudo W3C diz ... tentar passar o Facebook ou o Google ou qualquer site enorme por lá ... A web não está à espera de alguém
Uriahs Victor
3
@UriahsVictor Pode funcionar hoje, mas um dia os fornecedores de navegadores podem decidir mudar o comportamento, pois não é válido.
Jacob Alvarez
2
Os @UriahsVictor Flash e Java applets também eram bastante comuns.
Jacob Alvarez
17

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.

Pekka
fonte
Eu acho que ele está falando não apenas de funcionalidade (clique), mas também de aparência.
1
@ Web Logic sim, é por isso que estou falando sobre como estilizar o link para parecer um botão.
Pekka
6
@ ChrisMarisic, há muitas desvantagens em usar o onClick: ele não funciona com o JS desativado; o usuário não pode abrir um link em uma nova guia / janela, nem copiar o link na área de transferência para compartilhar; analisadores e bots não poderão reconhecer e seguir o link; navegadores com o recurso "pré-busca" não reconhecerão o link; e muitos mais.
Pekka
2
Embora esses sejam pontos válidos, não acho que realmente abordem a acessibilidade. Você quis dizer usabilidade, não acessibilidade? No desenvolvimento da Web, a acessibilidade geralmente é reservada para ser especificamente sobre se os usuários com deficiência visual podem operar bem seu aplicativo.
Chris Marisic
17

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 .

artie
fonte
17

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

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

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

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

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

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

MoMo
fonte
Você realmente obter um botão razoável sem qualquer CSS em tudo
Soren
15

@ 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>
Bhawna Jain
fonte
12

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 .

lukeocom
fonte
6
Lembre-se de que a especificação diz que isso não é válido, pois os botões não devem conter descendentes interativos. w3.org/TR/2011/WD-html5-20110525/the-button-element.html
lukeocom
1
Ambos estão corretos. O VS2015 sinaliza isso com um aviso: "O elemento 'a' não pode ser aninhado dentro do 'botão' do elemento" ", mas funciona com: IE11, Edge, Chrome, Firefox, Safari e pelo menos alguns (talvez todos) navegadores móveis atualmente. Portanto, não use essa técnica, mas se você o fez no passado, ela funciona por enquanto;))
Zeek2
8

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

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>

pseudosavant
fonte
7

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>

Adnan Toky
fonte
4

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>

Anees Hameed
fonte
5
Não valida. Colar em validator.w3.org/nu/#textarea fornece Erro: A entrada do elemento não deve aparecer como um descendente do elemento a.
Mark Amery
3

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>
Elnaz
fonte
3

se você estiver usando certificado SSL

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

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

Logan Wayne
fonte
3
Defina o botão type = "button", que permitirá que você clique nele sem enviar o formulário.
Blake A. Nichols
2

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 .

Jasch1
fonte
2

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.

Anders Martini
fonte
2
O elemento 'button' não pode ser aninhado no elemento 'a'.
Arius
de acordo com o padrão não, mas na minha experiência isso funciona bem. Ainda não o testou extensivamente em vários navegadores, mas pelo menos o FF e o Chrome parecem lidar bem com isso, com o comportamento esperado.
Anders Martini
Arius: Leia um pouco, experimentei um pouco mais e descobriu que um elemento de botão pode de fato ser aninhado dentro de um elemento <a>, desde que o elemento de botão não tenha sua própria ação aplicada (pois isso obviamente resultaria em um conflito - qual ação o navegador executará? os botões ou os <a> 's?), mas desde que você tenha certeza de que o próprio elemento do botão não aciona nenhuma ação depois de clicado, isso deve funcionar muito bem (provavelmente não deveria' embora seja considerado uma prática recomendada)
Anders Martini
4
Não se trata de possibilidade. Isso é apenas contra a especificação HTML5 e é tudo.
Arius
1

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.

Hayz
fonte
1

Em JavaScript

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

Em HTML

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

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>
Nasir Khan
fonte
0

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>
ilans
fonte
0

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>
Meir Gabay
fonte