Docs executáveis de HTML: Botão com link

Q: Como fazer um botão com link para outra página no HTML?

Use um link e estilize como botão: Sign up com CSS para padding, fundo, border radius e text-decoration: none. Ele parece um botão e se comporta como um link, que é o que ele é.

Q: Posso colocar um button dentro de uma tag a?

Não. O padrão HTML não permite conteúdo interativo como dentro de . Cada navegador lida com isso de um jeito, quem usa teclado passa por duas paradas de Tab para um único controle e os leitores de tela o anunciam de forma confusa. Use um elemento só.

Q: O button tem atributo href?

Não. não tem href. Para levar o navegador a uma URL, use , ou coloque o botão num com um action (um atributo formaction no botão o substitui).

Q: Como desativar um link que parece um botão?

Links não têm atributo disabled. Remova o href para que ele deixe de ser link, adicione aria-disabled="true" e estilize como desativado. Coloque o href de volta quando ele tiver que funcionar de novo.

Como fazer um botão com link para uma página

Escreva um link normal, <a href>, e estilize com CSS para que pareça um botão. Ele leva à página como qualquer link e mantém todos os recursos de link: abrir em nova aba, copiar endereço do link e a prévia da URL ao passar o mouse.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Button link</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      display: inline-block;
      padding: 10px 18px;
      border-radius: 8px;
      background: #2563eb;
      color: #fff;
      font-weight: 600;
      text-decoration: none;
    }
    .btn:hover { background: #1d4ed8; }
    .btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <a class="btn" href="https://developer.mozilla.org/">Read the docs</a>
</body>
</html>

As regras que transformam um link num botão:

display: inline-block deixa o padding abrir a caixa e a mantém na linha de texto.
text-decoration: none remove o sublinhado.
color e background substituem a cor azul do link.
:focus-visible dá a quem usa teclado um contorno de foco bem visível.

A mesma classe funciona num <button>, então o botão de envio de um formulário e um link para outra página podem ter a mesma aparência enquanto cada um faz o seu trabalho.

Botão ou link: qual elemento usar

A pergunta é o que acontece no clique, não a aparência.

Clicar nele	Use	Exemplos
Vai para outra URL	`<a href>`	Cadastrar, Leia mais, Ver preços, Baixar
Muda algo nesta página	`<button type="button">`	Abrir menu, Play, Adicionar ao carrinho, Mostrar senha
Envia um formulário	`<button type="submit">`	Entrar, Buscar, Salvar

Um link anunciado como "link" e um botão anunciado como "botão" dizem a quem usa leitor de tela o que vai acontecer. O comportamento no teclado também é diferente: Enter aciona os dois, mas Espaço aciona só botões (num link, Espaço rola a página). O elemento button em si está em botão HTML.

Por que não colocar um botão dentro de um link

Este é o padrão que a maioria tenta primeiro:

<!-- Invalid: interactive content inside <a> -->
<a href="/signup"><button>Sign up</button></a>

<!-- Invalid the other way round, too -->
<button><a href="/signup">Sign up</a></button>

O padrão HTML proíbe os dois: <a> e <button> não podem conter elementos interativos. Na prática, o teclado ganha duas paradas de Tab para um único controle, um leitor de tela pode anunciar "link, botão, Sign up", e se um clique segue o link depende do navegador. Escolha um elemento.

Por que não onclick com location.href

A outra gambiarra comum é um botão que define a URL no JavaScript. Ele parece igual a um link:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link vs onclick</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      display: inline-block;
      padding: 10px 18px;
      border: 0;
      border-radius: 8px;
      background: #16a34a;
      color: #fff;
      font: inherit;
      text-decoration: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <a class="btn" href="https://example.com/">Real link</a>
  <button class="btn" type="button"
    onclick="window.open('https://example.com/')">Button with onclick</button>
  <p>Hover both, then right-click both.</p>
</body>
</html>

(O exemplo usa window.open porque a prévia não pode navegar para fora; o código usual é location.href = '...'.) Passe o mouse e clique com o botão direito nos dois: só o link de verdade mostra a URL e oferece "Abrir link em nova aba" e "Copiar endereço do link". O botão também não aceita Ctrl+clique nem clique do meio, o navegador não o marca como visitado e os buscadores não o seguem como link. Se o destino é uma URL, escreva <a href>.

Um botão de formulário que abre uma URL

Existe um caso em que um <button> que leva a outra página é o certo: quando ele envia dados junto. Uma caixa de busca é o exemplo clássico. O action do formulário é a URL e method="get" coloca os campos na query string:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Search form</title>
</head>
<body>
  <form action="https://duckduckgo.com/" method="get">
    <label>Search <input type="search" name="q" value="html button link" required></label>
    <button type="submit">Search</button>
    <button type="submit" formaction="https://www.bing.com/search">Search with Bing</button>
  </form>
</body>
</html>

Aperte Search: numa página real o navegador iria para https://duckduckgo.com/?q=html+button+link. A prévia mostra os dados em vez de sair. formaction envia o mesmo formulário para outra URL a partir do segundo botão.

Botões de link desativados

Links não têm atributo disabled; <a disabled> não faz nada. Para desligar um botão de link, remova o href (um <a> sem href não é link e não pode ser clicado nem receber foco) e marque com aria-disabled="true" para que o estilo e os leitores de tela saibam:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Disabled link button</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      display: inline-block;
      padding: 10px 18px;
      border-radius: 8px;
      background: #2563eb;
      color: #fff;
      text-decoration: none;
    }
    .btn[aria-disabled="true"] {
      background: #e5e7eb;
      color: #6b7280;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <a class="btn" href="https://example.com/">Continue</a>
  <a class="btn" aria-disabled="true">Continue</a>
</body>
</html>

Aperte Tab na prévia: o foco cai só no primeiro botão. Alguns sites mantêm o href e adicionam pointer-events: none, mas isso só bloqueia o mouse. O link continua alcançável com Tab, e Enter ainda o segue.

Botões de nova aba e de download

Todos os atributos de link continuam funcionando num link estilizado como botão:

<a class="btn" href="/files/guide.pdf" download>Download the guide</a>
<a class="btn" href="https://github.com/" target="_blank" rel="noopener">GitHub</a>

Esse é mais um motivo para usar <a>: um <button> não tem download nem target. Mais sobre target em abrir link em nova aba.

Erros comuns

Um botão dentro de um link, ou um link dentro de um botão. HTML inválido com comportamento imprevisível.
<button onclick="location.href=..."> para navegação simples. Sem nova aba, sem copiar link, sem rastreamento pelos buscadores.
role="button" num link que navega. Diz a quem usa leitor de tela que ali existe um botão, e então a página muda. Mantenha como link.
Links estilizados como botão para ações como "Excluir" ou "Abrir menu" com href="#". Se nada é carregado, use um <button type="button">.
<a disabled>. O atributo não existe em links. Remova o href.
Esquecer display: inline-block, o que faz o padding vertical sobrepor as linhas de cima e de baixo.

Perguntas frequentes

Como fazer um botão com link para outra página no HTML?

Use um link e estilize como botão: <a href="/signup" class="btn">Sign up</a> com CSS para padding, fundo, border radius e text-decoration: none. Ele parece um botão e se comporta como um link, que é o que ele é.

Posso colocar um button dentro de uma tag a?

Não. O padrão HTML não permite conteúdo interativo como <button> dentro de <a>. Cada navegador lida com isso de um jeito, quem usa teclado passa por duas paradas de Tab para um único controle e os leitores de tela o anunciam de forma confusa. Use um elemento só.

O button tem atributo href?

Não. <button> não tem href. Para levar o navegador a uma URL, use <a href>, ou coloque o botão num <form> com um action (um atributo formaction no botão o substitui).

É ruim usar onclick com location.href num botão?

Funciona, mas o leitor perde tudo o que os links oferecem: clique do meio e Ctrl+clique para nova aba, Copiar endereço do link, a prévia da URL ao passar o mouse, e os buscadores não o seguem como link. Use um <a> quando o destino é uma URL.

Como desativar um link que parece um botão?

Links não têm atributo disabled. Remova o href para que ele deixe de ser link, adicione aria-disabled="true" e estilize como desativado. Coloque o href de volta quando ele tiver que funcionar de novo.

Conceitos relacionados