Como Alterar a Cor de um Botão em HTML

Este artigo vai ensiná-lo a alterar a cor de um botão na linguagem de programação HTML. Para tanto, você pode usar código simples HTML ou CSS (Cascading Style Sheets - Folha de Estilo em Cascatas) em HTML5.

Método 1

Método 1 de 2:

Usando o HTML

Baixe em PDF

Essa é a tag de abertura do código do botão. O corpo do código HTML é tudo o que estiver entre as tags <body> e </body>. É nele onde os elementos visíveis da página devem ser inseridos.
Esse parâmetro indica que existem elementos de estilo na tag. Todos os elementos de estilo devem ser inseridos depois do sinal de igual "=".
Todos os elementos da tag do botão HTML devem ser inseridos entre aspas.
. Esse elemento é usado para alterar a cor de fundo do botão.
5
Digite o nome da cor (em inglês) ou seu código hexadecimal depois de "background-color:". Você pode usar qualquer cor (como por exemplo: blue) ou seu equivalente em hexadecimal.
- Para encontrar o código hexadecimal, acesse https://www.google.com/search?q=color+picker em um navegador de internet. Use a barra deslizante na parte inferior para escolher a cor, e o círculo na janela para selecionar a matiz. Realce o código de seis dígitos (incluindo o símbolo "#") na barra lateral esquerda e cole-o na tag do botão.
- Você também pode usar a cor "transparente" como cor de fundo. ^{[1]XFonte de pesquisa}
Use-o para separar diferentes elementos de estilo na tag do botão HTML.
. Esse elemento é usado para determinar a cor da borda do botão. Qualquer elemento de estilo pode ser inserido em qualquer ordem dentro das aspas e depois de "style=". No entanto, cada um deles deve ser separado por um sinal de ponto e vírgula (;).
8
Digite o nome da cor (em inglês) ou seu código hexadecimal para a borda do botão. Insira-o após o elemento "border-color:".
- Para remover a borda, digite border:none em vez de "border-color:".
Use-o para separar diferentes elementos de estilo na tag do botão HTML.
. Esse elemento é usado para alterar a cor de texto do botão. Qualquer elemento de estilo pode ser inserido em qualquer ordem dentro das aspas e depois de "style=". No entanto, cada um deles deve ser separado por um sinal de ponto e vírgula (;).
Ela será usada para colorir o texto dentro do botão.
Todos eles precisam estar entre aspas depois da tag "style=". Após adicionar todos eles, insira as aspas para encerra a tag.
Depois de criar a tag de abertura do botão, insira o texto que será exibido dentro dele.
15
Digite </button> depois do texto do botão. Essa é a tag de encerramento para o botão. Pronto, o botão está completo! Agora, seu código HTML deverá ficar mais ou menos assim:
```
<!DOCTYPE html><html> <body>  <button style="background-color:red; border-color:blue; color:white">Texto do  botão</button> </body></html>
```
Publicidade

Método 2

Método 2 de 2:

Usando o CSS

Baixe em PDF

É no cabeçalho onde todas as informações não visíveis na página web são inseridas. Entre elas, estão os metadados títulos da página e folhas de estilo.
2
Type <style>. Essa tag adiciona um local na página web para o CSS. Ela deve ser inserida no cabeçalho do documento HTML.
- Alguns documentos HTML usam folhas de estilo externas. Se este for o seu caso, será preciso encontrar o local do arquivo CSS externo e editar as folhas de estilo do botão no documento.
3
Digite .button { em uma linha separada após a seção "style". Fazê-lo vai abrir a folha de estilo para o botão criado. ^{[2]XFonte de pesquisa}
- Você também pode fazer com que a cor do botão seja alterada ao passar o cursor do mouse sobre ele criando uma folha de estilo separada com a tag de abertura .button:hover {.
em uma linha separada na folha de estilo. Esse elemento controla a cor de fundo do botão.
5
Digite o nome de uma cor (em inglês) ou seu código hexadecimal seguido por um ponto e vírgula (;). Faça-o após o elemento "background-color:" na folha de estilo do botão. Em seguida, a cor do botão será definida.
- Para encontrar o código hexadecimal, acesse https://www.google.com/search?q=color+picker em um navegador de internet. Use a barra deslizante na parte inferior para escolher a cor, e o círculo na janela para selecionar a matiz. Realce o código de seis dígitos (incluindo o símbolo "#") na barra lateral esquerda.
- Você também pode digitar "transparent" para tornar a cor de fundo invisível.
. Esse elemento controla a cor da borda do botão. Insira-o em uma linha separada na folha de estilo dele.
7
Digite o nome de uma cor (em inglês) ou seu código hexadecimal seguido por um ponto e vírgula (;). Ela será usada para colorir a borda do botão. Insira-o após o elemento "border-color:" na folha de estilo do botão.
- Para remover a borda, digite border:none em vez de "border-color:colorname".
em uma linha separada na folha de estilo. Esse elemento controla a cor do texto dentro do botão.
Ela será usada para colorir o texto dentro do botão. Insira-o após o elemento "color:" na folha de estilo do botão.
Você pode criar múltiplas folhas de estilo para o botão contanto que cada um deles tenha um nome único.
Essa tag de deve ser inserida em uma linha separada para fechar a seção "style" no documento HTML.
13
Digite <a href="url" class="button">Texto do botão</a> no corpo do documento HTML. Fazê-lo vai adicionar o botão à parte visível do HTML usando as folhas de estilo designadas na seção "style" do documento HTML. Substitua "url" pelo endereço web vinculado ao botão. O corpo do documento HTML deve ser inserido entre as tags <body> e </body>. Agora, seu código HTML deverá ficar mais ou menos assim:
```
<!DOCTYPE html><html>   <head>    <style>     .button {      background-color:blue;      border-color:red;      color:white;      }    </style>  </head>   <body>      <a href="https://www.wikihow.com" class="button">Home</a>   </body></html>
```
Publicidade