<button>: Elemento BUTTON
Última atualização: 2026-10-13
<button>Elemento BUTTON
O elemento <button> cria um botão clicável. Diferente de <input type="button">, pode conter HTML arbitrário (texto, ícones, imagens). O type padrão é submit.
| Categoria | Formulários |
|---|---|
| Modelo de Conteúdo | Conteúdo de frase (sem conteúdo interativo) |
| Pais Permitidos | Qualquer elemento que aceite conteúdo de frase |
| Tag de Fechamento | Sim — requer fechamento </button> tag |
| Status | Padrão |
📝 Sintaxe
<button type="button">Texto do botão</button>⚙️ Atributos
Este elemento suporta os atributos globais mais os seguintes:
| Atributo | Valor | Descrição |
|---|---|---|
type | Keyword | The behavior type of the button.
|
name | Text | Button name, submitted with the form. |
value | Text | The value submitted with the button. |
disabled | Boolean | Disables the button. |
form | Form ID | Associates the button with a form (can be outside it). |
▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <button> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
Dica： Defina type="button" para botões fora de formulários; caso contrário, o clique pode enviar o formulário inesperadamente.
❓ Perguntas Frequentes
QQuais valores o atributo type de button pode ter? Qual é o padrão?
ATrês valores:
submit (envia o formulário), reset (redefine) e button (sem comportamento padrão). O padrão é submit — fora de formulários não afeta nada, mas dentro de um formulário um botão sem type dispara o envio por acidente; é a pegadinha mais comum. Escreva sempre o type explicitamente.QQual é a diferença entre button e input type='button'?
A
<button> tem modelo de conteúdo mais rico: aceita ícones, texto em negrito e elementos aninhados; <input type='button'> só recebe texto puro pelo value e não pode conter filhos. Projetos modernos recomendam uniformemente <button>.QPode aninhar um button dentro de outro button?
ANão, elementos interativos não se aninham — dentro de
<button> não cabem outro <button>, <a>, <input> etc. Para interação composta, separe a estrutura ou delegue eventos via JS num contêiner externo.🏷️ Tags Relacionadas
💡 Casos Relacionados
📚 Tutoriais Relacionados
