Como Alterar a Cor de um Botão em HTML

Coescrito por Equipe wikiHow

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

1
Digite <button no corpo do documento HTML. 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.
2
Digite style= depois de "button" na tag do botão. Esse parâmetro indica que existem elementos de estilo na tag. Todos os elementos de estilo devem ser inseridos depois do sinal de igual "=".
3
Adicione aspas (") depois do sinal de igual (=). Todos os elementos da tag do botão HTML devem ser inseridos entre aspas.
4
Digite background-color: entre aspas depois de "style=". 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]
  X
  Fonte de pesquisa}
6
Digite o sinal de ponto e vírgula (;) depois da cor de fundo. Use-o para separar diferentes elementos de estilo na tag do botão HTML.
7
Digite border-color: entre aspas depois de "style=". 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:".
9
Digite um sinal de ponto e vírgula (;) depois da cor de borda. Use-o para separar diferentes elementos de estilo na tag do botão HTML.
10
Digite color: entre aspas depois de "style=". 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 (;).
11
Digite o nome de uma cor (em inglês) ou seu código hexadecimal depois do elemento de estilo "color:". Ela será usada para colorir o texto dentro do botão.
12
Insira o sinal de aspas (") após todos os seus elementos de estilo. Todos eles precisam estar entre aspas depois da tag "style=". Após adicionar todos eles, insira as aspas para encerra a tag.
13
Digite > após os elementos de estilo para encerrar a tag do botão.
14
Insira o rótulo do botão após 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

1
Digite <head> no topo do documento HTML para criar o cabeçalho. É 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]
X
Fonte 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 {.
4
Digite background-color: 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.
6
Digite border-color:. 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".
8
Digite color: em uma linha separada na folha de estilo. Esse elemento controla a cor do texto dentro do botão.
9
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 o texto dentro do botão. Insira-o após o elemento "color:" na folha de estilo do botão.
10
Digite } em uma linha separada para fechar a 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.
11
Digite </style> ao final do CSS. Essa tag de deve ser inserida em uma linha separada para fechar a seção "style" no documento HTML.
12
Digite </head> para encerrar o cabeçalho do 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