Tag HTML <button>
A tag HTML <button> cria botões clicáveis. Aprenda o atributo type, estilização, o estado disabled e acessibilidade, com exemplos.
A tag <button> cria um botão clicável na página web. Ao contrário de um botão construído com a tag <input>, um <button> pode conter conteúdo rico — texto, imagens ou outros elementos HTML inline — entre suas tags de abertura e fechamento. Isso o torna o elemento preferido para a maioria dos botões hoje em dia, pois é mais fácil de estilizar e permite combinar um ícone com um rótulo.
Esta página aborda a sintaxe de <button>, o importantíssimo atributo type (e o problema que surge quando ele é esquecido dentro de um formulário), estilização, o estado disabled, acessibilidade e como <button> se compara com <input>.
No passado, alguns desenvolvedores usavam <input type="button"> em vez de <button> porque versões muito antigas do Internet Explorer renderizavam <button> de forma inconsistente. Esse problema ficou no passado — nos navegadores modernos, <button> é a escolha recomendada.
Sintaxe
A tag <button> vem em pares. O conteúdo é escrito entre as tags de abertura (<button>) e fechamento (</button>).
Exemplo da tag HTML <button>:
Exemplo da tag HTML <button>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Here will be our button</h1>
<button type="button">Click</button>
</body>
</html>O atributo type
O atributo type define o que um botão faz. Existem três valores:
submit— envia o formulário pai.reset— redefine todos os controles do formulário para seus valores iniciais.button— não faz nada por conta própria; o comportamento é definido via JavaScript.
O erro mais comum: dentro de um <form>, um <button> sem type assume como padrão type="submit". Assim, um botão que você pretendia usar como ação simples enviará o formulário (geralmente recarregando a página) no momento em que for clicado. Sempre defina type="button" explicitamente para botões não-submit dentro de um formulário.
Exemplo de submit, reset e button:
Exemplo dos três tipos de botão
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/submit">
<label>Name: <input type="text" name="name"></label>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button" onclick="alert('Just a button!')">Say hi</button>
</form>
</body>
</html>Submit envia o formulário, Reset limpa o campo de texto e Say hi apenas executa seu JavaScript sem interagir com o formulário.
Usando estilos CSS
Você pode aplicar estilos CSS à tag <button> para alterar a aparência do botão, seu tamanho, cor, fonte do texto e assim por diante.
Exemplo da tag <button> com estilos CSS:
Exemplo da tag HTML <button> com propriedades CSS de cor e fonte
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.red-text {
color: red;
}
.big-text {
font: bold 14px Arial;
}
</style>
</head>
<body>
Ordinary button
<button type="button">Add to the recycle bin</button>
<hr />
Button with red text
<button type="button" class="red-text"><b>HTML Book</b></button>
<hr />
Button with increased font size
<button type="button" class="big-text">Download the book</button>
</body>
</html>Resultado
O estado disabled
Um botão com o atributo disabled não pode ser clicado nem receber foco, e não disparará seus manipuladores de eventos nem enviará um formulário. Os navegadores também o exibem em cinza para que os usuários percebam que está inativo. Isso é útil quando uma ação está indisponível — por exemplo, enquanto um formulário não foi preenchido corretamente.
Exemplo de um botão desativado
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<button type="button">Active button</button>
<button type="button" disabled>Disabled button</button>
</body>
</html>Atributos
A tag <button> não possui atributos obrigatórios; no entanto, recomendamos sempre definir type="button" quando a tag é usada como um botão comum (não-submit), pois dentro de um formulário um type não definido assume como padrão submit.
| Atributos | Valor | Descrição |
|---|---|---|
autofocus | autofocus | Especifica que o botão deve receber foco após o carregamento da página. |
disabled | disabled | Desativa o botão. (Usado quando o botão deve se tornar ativo após a execução de alguma ação.) |
form | form_id | Especifica um ou mais formulários aos quais o botão pertence. Se o botão tiver múltiplos formulários, seus identificadores (form_id) devem ser separados por espaços. |
formaction | URL | Define o endereço para onde os dados do formulário serão enviados após clicar no botão. (Usado apenas para botões com o atributo type="submit"). |
formenctype | application/x-www-form-urlencoded | Define como os dados do formulário devem ser codificados ao ser enviado. (Usado apenas para type="submit"). Todos os símbolos são codificados antes do envio do formulário (valor padrão). |
multipart/form-data | Codifica os dados como MIME multipart. | |
text/plain | Espaços são substituídos pelo sinal "+", mas os símbolos não são codificados. | |
formmethod | get | Define o método da requisição HTTP que será usado ao enviar um formulário (apenas para type="submit"). Passa os dados do formulário na barra de endereço ("nome = valor"), que são adicionados à URL da página após o ponto de interrogação e separados por um e comercial (&). |
post | O navegador comunica-se com o servidor e envia os dados para processamento. | |
formnovalidate | formnovalidate | Especifica que os dados do formulário não devem ser validados no envio (apenas para type="submit"). |
formtarget | _blank | Especifica onde a resposta será exibida após o envio do formulário (apenas para type="submit"). Abre a resposta em uma nova janela. |
_self | Abre a resposta na janela atual. | |
_parent | Abre a resposta no frame pai. | |
_top | Abre a resposta na janela com largura total. | |
name | name | Define o nome do botão. |
type | button | Define um botão comum. |
reset | Botão que limpa os dados de entrada do formulário. | |
submit | Botão para enviar os dados do formulário. | |
value | text | Define o valor do botão. |
A tag <button> também suporta os Atributos Globais e os Atributos de Evento.
Acessibilidade: dando um nome acessível a um botão
Todo botão precisa de um nome acessível — o texto que um leitor de tela anuncia. Para um botão de texto normal, o nome é simplesmente o texto entre as tags. O problema aparece com botões apenas com ícone, onde não há texto visível.
Se o único elemento dentro do botão for uma imagem, dê ao <img> um atributo alt que descreva a ação, não a imagem. O botão então usa esse texto como seu nome:
<button type="button">
<img src="search.png" alt="Search">
</button>Aqui alt="Search" descreve o que o botão faz, então um leitor de tela anuncia "Search, button".
Se o botão não tiver texto nem imagem com alt — por exemplo, um ícone desenhado com uma fonte de ícones ou um SVG inline — adicione um aria-label para que o botão ainda tenha um nome:
<button type="button" aria-label="Close menu">
<span class="icon-close" aria-hidden="true"></span>
</button>O aria-label é o nome acessível do botão; aria-hidden="true" impede que o ícone decorativo seja anunciado. Note que aria-label e um <img alt> interno são mecanismos separados — use o que melhor se adequar à marcação e nunca deixe um botão apenas com ícone sem um deles.
Como adicionar um link a um botão?
Para criar um link clicável que pareça um botão, use um elemento <a> estilizado com CSS. Envolver um <button> dentro de um <a> é inválido em HTML5. Esta é a abordagem correta:
Como adicionar um link a um botão?
<a href="https://example.com" class="button-link">
Button Label
</a>Neste exemplo, o elemento <a> é estilizado para se parecer com um botão. Quando o usuário clica nele, é direcionado para a URL vinculada.
<button> vs. <input type="button">
Você pode criar um botão com <button> ou com a tag <input> (type="button", type="submit" ou type="reset"). Eles se comportam de forma semelhante, mas diferem no que podem conter:
<button> | <input type="button"> / <input type="submit"> | |
|---|---|---|
| Fonte do rótulo | Conteúdo entre as tags | O atributo value (somente texto simples) |
| Conteúdo rico | Sim — texto, imagens, ícones, outros elementos HTML inline | Não — somente texto |
| Estilização | Mais fácil (pseudo-elementos, elementos aninhados) | Mais limitada |
| Tag de fechamento | Obrigatória (</button>) | Nenhuma — é um elemento vazio |
<!-- Rich content is possible -->
<button type="submit"><img src="check.png" alt=""> Save</button>
<!-- Text-only, set through value -->
<input type="submit" value="Save">Use <button> quando quiser um ícone, texto formatado ou maior controle de estilização; opte por <input> quando um rótulo de texto simples for suficiente.