Baixe em PDF
Baixe em PDF
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.
Passos
-
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.
-
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 "=".
-
Adicione aspas (") depois do sinal de igual (=). Todos os elementos da tag do botão HTML devem ser inseridos entre aspas.
-
Digite background-color: 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] X Fonte de pesquisa
-
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 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 (;).
-
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:".
-
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 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 (;).
-
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 </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
-
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.
-
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.
-
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 { .
-
Digite background-color: 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 border-color: . 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 border:none em vez de "border-color:colorname".
-
Digite color: 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 </style> ao final do CSS. Essa tag de deve ser inserida em uma linha separada para fechar a seção "style" no documento HTML.
-
Digite </head> para encerrar o cabeçalho do documento HTML.
-
no corpo do documento HTML." src="https://www.wikihow.com/images_en/thumb/8/8b/11147764-28.jpg/v4-460px-11147764-28.jpg" decoding="async" class="efab57dd69ac0d209a117a05464a6b9b whcdn content-fill p_maxWidth" data-srclarge="https://www.wikihow.com/images/thumb/8/8b/11147764-28.jpg/v4-728px-11147764-28.jpg" data-width="280" data-height="344" id="efab57dd69ac0d209a117a05464a6b9b"/>
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8b\/11147764-28.jpg\/v4-460px-11147764-28.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8b\/11147764-28.jpg\/v4-728px-11147764-28.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}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
Referências
Publicidade
Inscreva-se na Newsletter Gratuita do wikiHow!
Receba tutoriais úteis em seu email semanalmente!
Inscreva-me!
