Docs executáveis de HTML: Botão HTML

Q: Como fazer um botão no HTML?

Escreva Click me . O texto entre as tags é o rótulo. Adicione um listener de click no JavaScript para que ele faça algo, ou coloque-o dentro de um com type="submit" para enviar o formulário.

Q: Qual é o tipo padrão de um botão HTML?

submit. Um sem atributo type dentro de um formulário envia esse formulário quando clicado, e é por isso que um botão simples num formulário pode recarregar a página. Escreva type="button" em qualquer botão que roda JavaScript.

Q: Qual a diferença entre button e input type=submit?

Os dois enviam um formulário. pode conter HTML (um ícone, texto em negrito) entre as tags, enquanto tira o rótulo do atributo value e só aceita texto simples. A maior parte do código moderno usa .

Q: Como desativar um botão no HTML?

Adicione o atributo disabled: Save . Um botão desativado não pode ser clicado nem receber foco, e o seu name e value não são enviados com o formulário. Remova o atributo (btn.disabled = false no JavaScript) para ativá-lo de novo.

Q: Como fazer um botão HTML levar para outra página?

Use um link estilizado como botão: See pricing . Um é para ações na página atual. Envolver um botão com é HTML inválido.

Q: Por que meu botão recarrega a página?

Ele está dentro de um e não tem type, então é um botão de envio, e o navegador envia o formulário e carrega a resposta. Adicione type="button" a ele, ou chame event.preventDefault() num listener de submit se você trata o formulário com JavaScript.

Como fazer um botão no HTML

Um botão é o elemento <button>. O conteúdo entre as tags é o que o usuário vê, e type="button" diz que ele roda o seu script em vez de enviar um formulário. Clique nele na prévia:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Button</title>
</head>
<body>
  <button type="button" id="like">Like</button>
  <p>Likes: <span id="count">0</span></p>

  <script>
    const count = document.querySelector('#count');
    document.querySelector('#like').addEventListener('click', () => {
      count.textContent = Number(count.textContent) + 1;
    });
  </script>
</body>
</html>

Isso é tudo de que um botão funcional precisa: um rótulo, um type e algo que escute o click. O navegador o torna focável pelo teclado e o aciona com Enter ou Espaço, então quem usa teclado ganha isso de graça. Uma <div> com um manipulador de clique não ganha nada disso.

Você também pode ver onclick="..." escrito direto na tag. Funciona, mas addEventListener mantém o script fora da marcação e deixa vários listeners compartilharem um botão.

Os três tipos de botão

O atributo type decide o que um botão faz quando é pressionado.

`type`	O que faz	Use para
`submit`	Envia o formulário a que pertence. É o padrão.	A ação principal de um formulário
`button`	Nada sozinho; o seu JavaScript decide	Alternâncias, diálogos, contadores, tudo o que é script
`reset`	Volta todos os campos do formulário ao valor inicial	Raramente; os usuários clicam sem querer

Digite algo e teste cada botão. A prévia não sai da página quando o formulário é enviado; ela mostra os dados que o formulário teria enviado.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Button types</title>
</head>
<body>
  <form>
    <label>Name <input name="name" value="Ada"></label>
    <p>
      <button type="submit">Submit</button>
      <button type="reset">Reset</button>
      <button type="button" id="upper">Uppercase</button>
    </p>
  </form>

  <script>
    document.querySelector('#upper').addEventListener('click', () => {
      const field = document.querySelector('input[name="name"]');
      field.value = field.value.toUpperCase();
    });
  </script>
</body>
</html>

Reset restaura o valor escrito no HTML (Ada), não um campo vazio. E se você apagar type="button" do Uppercase, ele vira um botão de envio: coloca o nome em maiúsculas e depois envia o formulário.

Botão submit do HTML: enviando name e value

Um botão de envio pode ter o seu próprio name e value. Eles só são enviados com o formulário quando esse botão foi o que fez o envio, então dois botões podem compartilhar um formulário e dizer ao servidor qual ação foi escolhida:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Submit buttons</title>
</head>
<body>
  <form>
    <label>Title <input name="title" value="My first post" required></label>
    <p>
      <button type="submit" name="action" value="draft">Save draft</button>
      <button type="submit" name="action" value="publish">Publish</button>
    </p>
  </form>
</body>
</html>

Aperte Publish e o formulário envia title=My first post e action=publish. Apague o título e aperte qualquer um dos botões: required impede o envio e o navegador mostra a sua própria mensagem. Apertar Enter dentro do campo de texto também envia, e o navegador trata isso como um clique no primeiro botão de envio, então manda action=draft.

Botões de envio também aceitam atributos que substituem os do formulário só para aquele botão: formaction (outra URL), formmethod, formtarget e formnovalidate, que pula a validação. formnovalidate é a escolha comum para um botão "Salvar rascunho" que deve funcionar enquanto campos obrigatórios ainda estão vazios.

Um botão colocado fora do seu formulário ainda pode enviá-lo com o atributo form, que recebe o id do formulário: <button type="submit" form="signup">Sign up</button>.

Botões desativados

O atributo disabled desliga um botão. Um botão desativado ignora cliques, é pulado pelo Tab e não é enviado com o formulário. Os navegadores também o deixam acinzentado. Um padrão comum é manter o botão de envio desativado até uma condição ser atendida:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Disabled button</title>
</head>
<body>
  <form>
    <label>
      <input type="checkbox" id="agree" name="terms" value="accepted">
      I accept the terms
    </label>
    <p><button type="submit" id="go" disabled>Create account</button></p>
  </form>

  <script>
    const agree = document.querySelector('#agree');
    const go = document.querySelector('#go');
    agree.addEventListener('change', () => {
      go.disabled = !agree.checked;
    });
  </script>
</body>
</html>

No JavaScript, button.disabled é uma propriedade booleana: defina como true ou false. No HTML, o que conta é a presença do atributo, então disabled="false" ainda desativa o botão.

Um botão desativado não diz por que está desativado, e quem usa teclado ou leitor de tela navegando com Tab nunca para nele. Quando o motivo não é óbvio, escreva-o num texto ao lado do botão, ou deixe o botão ativo e mostre uma mensagem de erro quando ele for pressionado.

Estilizando um botão com CSS

Os navegadores desenham os botões com a sua própria fonte, borda e fundo. Definir algumas propriedades substitui tudo isso. Mantenha um estilo de foco visível: é assim que quem usa teclado sabe onde está.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled buttons</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      font: inherit;
      padding: 10px 18px;
      border: 2px solid #2563eb;
      border-radius: 8px;
      background: #2563eb;
      color: #fff;
      cursor: pointer;
    }
    .btn:hover { background: #1d4ed8; border-color: #1d4ed8; }
    .btn:active { transform: translateY(1px); }
    .btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .btn-secondary { background: #fff; color: #2563eb; }
    .btn-secondary:hover { background: #e5e7eb; }
  </style>
</head>
<body>
  <button type="button" class="btn">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn" disabled>Disabled</button>
</body>
</html>

Para que serve cada regra:

font: inherit faz o botão usar a fonte da página. Sem isso, os botões usam a fonte de formulário do próprio navegador, que é menor (13.33px no Chrome e no Firefox).
cursor: pointer mostra o cursor de mãozinha. Por padrão os botões mostram a seta normal.
:hover, :active e :focus-visible estilizam os estados de ponteiro, clique e teclado. :focus-visible mostra o contorno no foco pelo teclado, mas não depois de um clique do mouse, então você não precisa remover o outline para evitá-lo.
:disabled mira os botões com o atributo disabled.

Aperte Tab na prévia para ver o contorno de foco âmbar passar entre os dois primeiros botões. O desativado é pulado. (No Mac, Safari e Firefox só levam o Tab aos botões quando a navegação por teclado está ativada nas configurações do sistema; no Safari, Option+Tab funciona sem isso.) Para a lista completa de estados, veja hover no CSS.

Botões com ícones

Como <button> pode conter HTML, um ícone vai dentro dele ao lado do texto. Um botão só com ícone não tem texto para os leitores de tela anunciarem, então dê a ele um aria-label:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Icon buttons</title>
  <style>
    button {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font: inherit;
      padding: 8px 12px;
      border: 1px solid #111827;
      border-radius: 6px;
      background: #fff;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button type="button">
    <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M2 8h12M8 2v12" stroke="#16a34a" stroke-width="2"/>
    </svg>
    Add item
  </button>

  <button type="button" aria-label="Delete">
    <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M3 3l10 10M13 3L3 13" stroke="#dc2626" stroke-width="2"/>
    </svg>
  </button>
</body>
</html>

aria-hidden="true" no SVG o tira da árvore de acessibilidade, então o primeiro botão é anunciado como "Add item, botão" e o segundo como "Delete, botão".

button vs input type="submit"

<input type="submit"> é o jeito mais antigo de escrever um botão de envio. Os dois enviam o formulário da mesma forma; a diferença é o que podem conter.

<input type="submit" value="Send">   <!-- label comes from value, text only -->
<button type="submit">Send</button>  <!-- label is the content, HTML allowed -->

	`<button>`	`<input type="submit">`
Rótulo	O conteúdo entre as tags	O atributo `value`
Pode conter ícones ou marcação	Sim	Não
Tag de fechamento	Obrigatória	Nenhuma (elemento vazio)
Tipo padrão	`submit`	Sempre submit

Use <button>. O único motivo para manter <input type="submit"> é CSS ou JavaScript existente que o seleciona. Também existem <input type="button"> e <input type="reset">, a mesma ideia para os outros dois tipos.

Botão ou link?

Um botão faz algo na página atual: envia, abre, alterna, apaga. Um link vai para outra URL. Se clicar nele muda a barra de endereço, ele deve ser um <a href>, estilizado como botão se o design pedir. Esse padrão, e por que um botão dentro de um link é inválido, está em botão com link em HTML.

Acessibilidade

Use um <button> de verdade. Ele recebe foco, funciona com Enter e Espaço e é anunciado como botão. Recriar isso numa <div> exige role, tabindex e manipuladores de teclado, e normalmente continua incompleto.
Todo botão precisa de um nome: o seu texto, ou aria-label quando só tem ícone.
Mantenha um estilo de foco visível. outline: none sem substituto deixa quem usa teclado perdido.
Faça a área de clique grande o bastante. A WCAG 2.2 pede pelo menos 24 por 24 pixels CSS; um padding como o do exemplo estilizado acima dá uns 40 pixels de altura.
Para um botão de alternância, adicione aria-pressed="true" ou "false" e atualize quando o estado mudar.

Erros comuns

Um botão num formulário sem type. Ele envia o formulário. Escreva type="button" em todo botão que não deve enviar.
Envolver um botão com um link, <a href="/x"><button>Go</button></a>. É HTML inválido e se comporta de forma diferente em cada navegador. Use um elemento: um link estilizado como botão.
Usar <div onclick> como botão. Não dá para chegar nele pelo teclado.
Remover o contorno de foco sem adicionar um estilo :focus-visible.
Escrever disabled="false" e esperar um botão ativo. Remova o atributo.
Esquecer font: inherit e não entender por que os botões usam uma fonte diferente do resto da página.

Perguntas frequentes

Como fazer um botão no HTML?

Escreva <button type="button">Click me</button>. O texto entre as tags é o rótulo. Adicione um listener de click no JavaScript para que ele faça algo, ou coloque-o dentro de um <form> com type="submit" para enviar o formulário.

Qual é o tipo padrão de um botão HTML?

submit. Um <button> sem atributo type dentro de um formulário envia esse formulário quando clicado, e é por isso que um botão simples num formulário pode recarregar a página. Escreva type="button" em qualquer botão que roda JavaScript.

Qual a diferença entre button e input type=submit?

Os dois enviam um formulário. <button> pode conter HTML (um ícone, texto em negrito) entre as tags, enquanto <input type="submit"> tira o rótulo do atributo value e só aceita texto simples. A maior parte do código moderno usa <button>.

Como desativar um botão no HTML?

Adicione o atributo disabled: <button disabled>Save</button>. Um botão desativado não pode ser clicado nem receber foco, e o seu name e value não são enviados com o formulário. Remova o atributo (btn.disabled = false no JavaScript) para ativá-lo de novo.

Como fazer um botão HTML levar para outra página?

Use um link estilizado como botão: <a href="/pricing" class="btn">See pricing</a>. Um <button> é para ações na página atual. Envolver um botão com <a> é HTML inválido.

Por que meu botão recarrega a página?

Ele está dentro de um <form> e não tem type, então é um botão de envio, e o navegador envia o formulário e carrega a resposta. Adicione type="button" a ele, ou chame event.preventDefault() num listener de submit se você trata o formulário com JavaScript.

Conceitos relacionados