Hello, there! Quem nunca precisou estilizar um botão em CSS? Os botões são uma das partes mais importantes de qualquer site, já que são eles que os usuários clicam para executar ações.
E, como você já sabe, as propriedades usadas para estilizar botões em CSS estão todas em inglês. Então hoje vamos dar uma olhada em algumas palavras que você deve ter na ponta da língua para quando estiver programando em CSS.
Vamos ampliar o seu vocabulário técnico? Let's go!
Vocabulário em inglês para estilizar botões em CSS
Existem várias propriedades que podem ser usadas para estilizar um botão, mas hoje vamos aprender algumas das mais comuns:
BACKGROUND-COLOR
A palavra "background" significa "fundo" e "color" significa "cor". Então, "background-color" nada mais é do que "cor de fundo".
Com essa propriedade, você pode definir qual será a cor do fundo do botão, como azul, verde ou vermelho. É uma das primeiras coisas que mudamos quando queremos dar vida a um botão.
BORDER-RADIUS
A palavra "border" significa "borda" e "radius" significa "raio" (mas estamos falando do raio matemático, aquele de círculos e circunferências). Assim, "border-radius" é o "raio da borda".
Essa propriedade serve para arredondar os cantos do botão. Se você colocar um valor pequeno, os cantos ficam só levemente arredondados. Se colocar um valor grande, o botão pode até virar uma forma circular.
HOVER
A palavra "hover" em inglês significa "pairar" ou "passar por cima". Já em CSS, usamos :hover para definir o estilo que o botão terá quando o usuário passar o mouse em cima dele (mas sem clicar).
Por exemplo: você pode deixar o botão mais escuro, mudar a cor do texto ou até aumentar de tamanho quando alguém passar o mouse por cima. Isso ajuda o usuário a ter mais clareza de qual botão ele está clicando.
BOX-SHADOW
"Box" significa "caixa" e "shadow" significa "sombra". Então, "box-shadow" é literalmente "sombra da caixa".
Com essa propriedade, você pode adicionar uma sombra ao botão, e criar uma certa profundidade, fazendo ele parecer que está levemente elevado da página.
WIDTH
"Width" é muito comum de ser usada em CSS não apenas em botões, e significa "largura". Ela vai definir a largura do botão, ou seja, o espaço que ele vai ocupar horizontalmente.
PADDING
Por último, também temos o "padding". Em inglês, "padding" significa "preenchimento" ou "acolchoamento".
Já em CSS, o "padding" controla o espaço interno entre o texto do botão e suas bordas. É como se estivéssemos definindo o "tamanho do preenchimento" entre o texto e a borda. Se você aumentar o padding, o botão vai ficar maior e mais espaçoso, mesmo sem mudar o tamanho da fonte.
Now you understand exactly what these properties mean in English! (Agora você entende exatamente o que essas propriedades significam em inglês!)
Continue estudando com a gente no nosso artigo "Você conhece a sigla EAFP em programação?". See you!