Como fazer um botão HTML funcionar como um link

A forma correta de fazer um controle HTML abrir uma URL depende do resultado desejado. Para navegação, use um elemento <a> com href e aplique CSS para que pareça um botão. Use <button> quando o controle executa uma ação e um botão de envio quando transmite dados de um formulário. Não coloque <button> ou <input> dentro de <a>: os dois são interativos, portanto a combinação cria semântica e comportamento de teclado conflitantes.

Escolha uma âncora ou um botão de acordo com o resultado

Use uma âncora quando a ativação muda o endereço, abre um documento, baixa um arquivo ou leva a outra página. href fornece um destino real, permitindo abrir o link em outra aba, copiar a URL, criar um favorito e acessá-lo pelo teclado.

Use <button type="button"> quando a ativação modifica a página atual ou inicia uma ação, como abrir uma caixa de diálogo, alternar um painel ou executar um script. Um formato retangular não transforma um botão em link. O papel do elemento deve corresponder ao seu comportamento.

Estilize <a> como botão para navegação

Esta é a solução recomendada quando o controle só precisa navegar. Mantenha o destino em href, use um texto significativo e mostre o foco. Troque /docs/ pelo seu destino.

<a class="button-link" href="/docs/">Open the documentation</a>

.button-link {
  display: inline-block;
  padding: 0.65rem 1rem;
  border-radius: 0.35rem;
  background: #1769aa;
  color: #fff;
  text-decoration: none;
}

.button-link:hover {
  background: #0d4f80;
}

.button-link:focus-visible {
  outline: 3px solid #f5b700;
  outline-offset: 2px;
}

O resultado parece um botão, mas continua sendo um link. Enter o ativa e o navegador conhece o destino. Se abrir uma nova aba, informe isso no texto:

<a href="https://example.com/docs" target="_blank" rel="noopener">
  Open the documentation (new tab)
</a>

Não use href="#" nem href="javascript:void(0)" para imitar um botão. Esses valores não representam um destino real e podem causar rolagem ou comportamento inesperado. href pode ser um caminho relativo, uma URL HTTPS absoluta, um fragmento ou outra URL endereçável. CSS altera a apresentação, não os recursos nativos do link.

Use <button> com JavaScript apenas para uma ação de botão

Um botão é apropriado quando a aplicação precisa verificar um estado ou executar outra tarefa antes de navegar. Declare o tipo e registre um listener com addEventListener. window.location.assign() faz a navegação.

<button type="button" id="docs-button">Open the documentation</button>

<script>
  document.querySelector("#docs-button").addEventListener("click", () => {
    window.location.assign("https://example.com/docs");
  });
</script>

O exemplo funciona com ponteiro, Enter e Espaço, mas depende de JavaScript. Para navegação comum, prefira a âncora, que continua utilizável com JavaScript desativado. Em aplicações maiores, coloque o listener em um módulo em vez de usar um atributo onclick. Uma URL vazia ou inválida é um limite; valide os valores dinâmicos antes de chamar assign().

Use um formulário quando a tarefa for enviar dados

A abordagem com formulário é adequada quando um servidor recebe campos. Coloque o destino em action e use um controle de envio. Isso é uma submissão de formulário, não apenas uma navegação de link.

<form action="/search" method="get">
  <label for="query">Search</label>
  <input id="query" name="q" type="search">
  <button type="submit">Search</button>
</form>

Enviar CSS button pode produzir /search?q=CSS+button, conforme a codificação normal do formulário. Não use um formulário vazio apenas para obter aparência de botão. formaction pode fornecer um destino diferente para um botão específico com type="submit".

Quando um projeto exige a forma baseada em value, <input type="submit"> também é válido:

<form action="/docs/" method="get">
  <input type="submit" value="Open the documentation">
</form>

value torna-se o rótulo visível. Não envolva esse input em uma âncora. <input type="button"> não envia nem navega sozinho; precisa de um script.

Corrija um botão que não abre o link

• Para navegar, o código deve ser <a href="...">, mesmo que CSS o faça parecer um botão.
• Em um formulário, use type="button" para uma ação que não envia dados. Sem esse tipo, o botão pode ser submit e recarregar a página.
• Se o botão JavaScript não funcionar, verifique o console, o seletor e o carregamento do script. Sem JavaScript, o handler não executa.
• Mantenha :focus-visible para que usuários do teclado identifiquem o controle.
• Em um link comum, não combine uma âncora com <button> ou <input> aninhado.

Em resumo, use <a href="..."> para navegação, <button type="button"> para ações e um botão submit dentro do formulário quando dados precisarem ser enviados. Essa separação fornece semântica previsível aos navegadores e às tecnologias assistivas.