como se faz

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.

[editar]Passos

[editar]Usando o HTML

Digite 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.
Digite 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 "=".
Adicione aspas (") depois do sinal de igual (=). Todos os elementos da tag do botão HTML devem ser inseridos entre aspas.
Digite entre aspas depois de "style=". Esse elemento é usado para alterar a cor de fundo do botão.
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]
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.
Digite 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 (;).
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 em vez de "border-color:".
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.
Digite 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 (;).
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.
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.
Digite após os elementos de estilo para encerrar a tag do botão.
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.
Digite 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:

[editar]Usando o CSS

Digite 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.
Type . 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.
Digite em uma linha separada após a seção "style". Fazê-lo vai abrir a folha de estilo para o botão criado.
^[2]
- 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 .
Digite em uma linha separada na folha de estilo. Esse elemento controla a cor de fundo do botão.
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.
Digite . Esse elemento controla a cor da borda do botão. Insira-o em uma linha separada na folha de estilo dele.
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 em vez de "border-color:colorname".
Digite em uma linha separada na folha de estilo. Esse elemento controla a cor do texto dentro do botão.
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.
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.
Digite ao final do CSS. Essa tag de deve ser inserida em uma linha separada para fechar a seção "style" no documento HTML.
Digite para encerrar o cabeçalho do documento HTML.
Digite 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>
```