Etiqueta HTML <button>

Definição e uso

<button> a etiqueta define um botão clicável.

em <button> Dentro do elemento, você pode inserir texto (e tags como <i>, <b>, <strong>, <br>, <img> etc.). Isso é usado <input> O que os botões de criação de elementos não conseguem fazer!

Dica:Sempre defina <button> elemento especifica Atributo typepara informar ao navegador o tipo de botão.

Dica:Você pode adicionar estilos ao botão facilmente com CSS! Veja os exemplos abaixo ou acesse nossa Tutorial de botão CSS.

Descrição detalhada

<button> Controle com <input type="button"> oferece funcionalidades mais poderosas e conteúdo mais rico.<button> em comparação com </button> Todo o conteúdo entre os rótulos é o conteúdo do botão, incluindo qualquer conteúdo texto aceitável, como texto ou conteúdo multimídia. Por exemplo, podemos incluir uma imagem e o texto relacionado para criar um ícone atraente no botão.

O único elemento proibido é o mapeamento de imagem, pois ações sensíveis ao mouse e ao teclado podem interromper o comportamento do botão do formulário.

Sempre defina para o botão Atributo type. O valor padrão do Internet Explorer para o atributo type é "button"enquanto que no outros navegadores (inclusive nas normas do W3C) o valor padrão é "submit".

Veja também:

Manual de referência do DOM HTML:Objeto Button

Tutorial de CSS:Definir estilo do botão

Exemplo

Botões clicáveis marcados assim:

<button type="button">Clique em mim!</button>

Experimente pessoalmente

Dica:Mais exemplos estão disponíveis na parte inferior da página.

Atributo

Atributo Valor Descrição
autofocus autofocus Define que o botão deve obter automaticamente o foco ao carregar a página.
disabled disabled Define que o botão deve ser desativado.
form form_id Define qual formulário o botão pertence.
formaction URL

Define para onde os dados do formulário devem ser enviados ao submeter.

Apenas aplicável quando type="submit".
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

Define como os dados do formulário devem ser codificados antes de serem enviados para o servidor.

Apenas aplicável quando type="submit".
formmethod
  • get
  • post

Define como os dados do formulário devem ser enviados (qual método HTTP deve ser usado).

Apenas aplicável quando type="submit".
formnovalidate formnovalidate

Define que os dados do formulário não devem ser validados ao submeter.

Apenas aplicável quando type="submit".
formtarget
  • Nome da janela

Define onde a resposta deve ser exibida após o envio do formulário.

Apenas aplicável quando type="submit".
name Nome Define o nome do botão.
popovertarget element_id Define o elemento do popup a ser chamado.
popovertargetaction
  • hide
  • show
  • toggle
 Define a ação do elemento popup ao clicar no botão.
type
  • button
  • reset
  • submit
 Define o tipo do botão.
value Texto Define o valor inicial do botão.

Atributos globais

<button> A tag também suporta Atributos globais no HTML.

Atributos de evento

<button> A tag também suporta Atributos de evento no HTML.

Configurações CSS padrão

Nenhum.

Mais exemplos

Exemplo 2

Defina o estilo do botão usando CSS:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  borda: none;
  cor: branco;
  preenchimento: 15px 32px;
  alinhamento-texto: centro;
  decora-texto: none;
  exibição: bloco-inline;
  tamanho-fonte: 16px;
  margem: 4px 2px;
  cursor: pointer;
}
.button1 {cor-fundo: #4CAF50;} /* Verde */
.button2 {cor-fundo: #008CBA;} /* Azul */
</style>
</head>
<body>
<button class="button button1">Verde</button>
<button class="button button2">Azul</button>
</body>
</html>

Experimente pessoalmente

Exemplo 2

Defina o estilo do botão usando CSS (com efeito ao passar o mouse):

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  borda: none;
  cor: branco;
  preenchimento: 16px 32px;
  alinhamento-texto: centro;
  decora-texto: none;
  exibição: bloco-inline;
  tamanho-fonte: 16px;
  margem: 4px 2px;
  duração-transição: 0.4s;
  cursor: pointer;
}
.button1 {
  cor-fundo: branco;
  cor: preto;
  borda: 2px sólida #4CAF50;
}
.button1:hover {
  cor-fundo: #4CAF50;
  cor: branco;
}
.button2 {
  cor-fundo: branco;
  cor: preto;
  borda: 2px sólida #008CBA;
}
.button2:hover {
  cor-fundo: #008CBA;
  cor: branco;
}
</style>
</head>
<body>
<button class="button button1">Verde</button>
<button class="button button2">Azul</button>
</body>
</html>

Experimente pessoalmente

Navegadores suportam

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte