Tag HTML <button>

Hoje vamos falar sobre o botão Tag . Seria útil se pudesse cumprir os requisitos de aprendizagem.

A tag HTML <button> é usada para criar um botão clicável em uma página da Web que executa uma ação quando clicado. É um elemento versátil que pode ser usado para diversas finalidades, como envio de formulários, acionamento de scripts ou navegação para uma página da Web diferente.

Os botões clicáveis são exibidos da seguinte maneira:

Example:

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<button type="button">Click Me!</button>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Para estilizar botões, implemente CSS:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<style>
.button {border: none;
color: white;
padding: 10px 28px;text-align: center;
text-decoration: none;
display:
inline-block;0
font-size: 12px;
margin: 4px 2px;cursor: pointer;
}.button1 {background-color:
#4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
</style>
</head>
<body><button class="button
button1">Green</button>
<button class="button button2">Blue</button></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Botões de estilo usando CSS (incluindo o efeito hover)

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
<style>
.button {border: none; color: white;
padding: 16px 32px;text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;transition-duration: 0.4s;
cursor: pointer;
}.button1 {background-color: white;
color: black;
border: 3px
solid #4CAF50;
}.button1:hover {
background-color: #4CAF50;color: white;
}.button2 {
background-color: white;
color:
black;
border: 3px solid #008CBA;
}.button2:hover {background-color: #008CBA;
color: white;
}</style>
</head>
<body><button class="button button1">Green</button>
<button class="button
button2">Blue</button>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo de tag de botão em html com javascript:

Example:

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="alert('Button clicked!')">Click me</button>
<button disabled type="button" onclick="alert('Button clicked!')">Click me</button>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Índice-

Tag HTML <botão>:

Usos e Definição

Tags de botão <button> identificam botões clicáveis.

Texto (incluindo tags como <i> , <b> , <strong> , <br> , <img> e assim por diante) pode ser colocado dentro de um elemento <button> . Isso não é viável com um botão <input> criado pelo elemento.

Dica: No botão Tag , inclua sempre um atributo type que indique ao navegador que tipo de botão está sendo exibido.

Dica: você pode estilizar botões com CSS rapidamente. Aqui estão alguns exemplos. Confira nosso próximo tutorial sobre botões CSS.

Compatibilidade do navegador

Elemento
<botão>	Sim	Sim	Sim	Sim	Sim

Atributos

Atributo	Valor	Visão geral
formação	URL	Quando um formulário é enviado, ele determina para onde os dados do formulário devem ir. aplica-se apenas ao tipo “enviar”.
formtarget	_blank _self _parent _top nome do quadro	Define onde a resposta deve ser mostrada após o envio do formulário. Isso se aplica somente ao tipo “enviar”.
nome	nome	Defina o nome do botão em Tag button .
tipo	botão redefinir enviar	Indica que tipo de botão é.
forma	form_id	Indica a qual formulário o botão se refere.
valor	texto	Determine o valor inicial do botão.
auto-foco	auto-foco	Indica que um botão deve ser focado imediatamente no carregamento da página.
desabilitado	desabilitado	Permite desativar um botão.
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	Antes de enviar os dados do formulário para um servidor, descreva como eles devem ser codificados. aplica-se apenas ao tipo “enviar”.
método de formulário	obter postagem	Determina o método HTTP a ser usado para enviar dados de formulário. Isso se aplica apenas ao tipo “enviar”.
formnovalidate	formnovalidate	Indica que os dados do formulário não devem ser verificados no envio. Isso se aplica apenas ao tipo “enviar”.

Atributos Globais

Os Atributos Globais do HTML são suportados pelo botão Tag <button> .

Atributos do Evento

O botão Tag <button> do HTML também funciona com atributos de evento .

Importância do botão HTML

Aqui estão algumas razões pelas quais os botões HTML são importantes:

Os botões permitem que os usuários interajam com uma página da Web, fornecendo uma interface intuitiva e fácil de usar para executar ações, enviar formulários e navegar em um site.
Os botões são comumente usados para criar uma chamada para ação em uma página da web, incentivando os usuários a realizar uma ação específica, como clicar para saber mais ou fazer uma compra.
Os botões podem ser estilizados para combinar com a aparência de um site, tornando-os um elemento importante do design da web. Com uma ampla variedade de estilos e opções disponíveis, os botões podem ser personalizados para se adequarem à estética geral de um site.
Os botões são um elemento importante da acessibilidade na Web, pois fornecem uma maneira clara e fácil de entender para os usuários interagirem com um site. Os botões podem ser projetados para serem facilmente navegados usando tecnologias assistivas, como leitores de tela.
Os botões HTML são suportados por todos os principais navegadores da Web, tornando-os um elemento confiável e consistente em diferentes plataformas e dispositivos.

Se este artigo foi informativo o suficiente para atender aos seus desejos educacionais, assine nosso boletim informativo abaixo para estar em contato com o conteúdo semelhante.

Nós valorizamos o seu feedback.

Tag HTML <button>

Example:

Example

Example

Example:

Usos e Definição

Compatibilidade do navegador

Atributos

Atributos Globais

Atributos do Evento

Importância do botão HTML

Sentindo entediado?