Definindo as cores
No CSS as cores podem ser definidas por Nome, Código hexadecimal e/ou Código RGB.
OBS: códigos hexadecimais sempre devem ser iniciados por "#".
Colorindo um botão
A partir daqui, vamos usar de exemplo um simples botão que já tem suas cores pré-definidas pelo próprio navegador.
E para colorir esse botão, passaremos pelas seguintes propriedades de CSS...
background-color
Com a propriedade "background-color" podemos mudar as cores de fundo dos elementos HTML.
color
Já a propriedade "color" nos permite alterar as cores dos textos nos elementos HTML.
border-color
Também podemos mudar as cores das bordas dos elementos usando a propriedade "border-color", mas atenção, para você conseguir ver essa cor refletir, o elemento precisa ter a largura da borda e o tipo já definidos por você ou pelo navegador.
border
Falando ainda sobre a borda, também podemos unir todas as propriedades de bordas, que mencionei, em uma única propriedade. A abreviação será "border".
outline-color
A propriedade "outline-color" é muito parecida com a propriedade de borda, porém, o outline serve para marcar/contornar o elemento que está em foco na página caso o usuário queira passar pelos itens usando o teclado e não o mouse.
Assim como a borda, o outline-color também precisa da definição da largura e do tipo do contorno para assim refletir a cor. A sua abreviação é "outline".
outline
Normalmente as cores de outline ficam ocultas no código e apenas são visíveis quando o elemento de fato estiver em foco na página, de acordo com a navegação do usuário.
Dica Bônus:
outline-offset
A propriedade "outline-offset" adiciona um espaço transparente entre o contorno e a borda do elemento.
Código do botão:
HTML:
<button>Colora-me</button>
CSS:
button {
padding: 10px 15px;
font-size: 16px;
border-radius: 4px;
/* cores */
background-color: #ef2db2;
color: #fff;
border: 4px solid #c6128d;
outline: 2px solid #5a34e8;
outline-offset: 3px;
}
Links úteis e referência:
Veja o código desse projeto no Codepen
Documentação CSS:
MDN Web Docs
w3schools
Top comments (0)