Aprenda a personalizar o botão de login do seu site utilizando CSS e deixe-o com uma aparência moderna e interativa. Este guia passo a passo aborda desde o ajuste do tamanho e posição do botão até a adição de efeitos como sombra e hover, utilizando conceitos importantes de CSS. Descubra como transformar completamente a aparência do botão apenas com CSS, sem a necessidade de imagens ou outros recursos.

Customizando o Botão de Login com CSS

Neste artigo, vamos explorar como customizar o botão de login de um site utilizando CSS. Vamos aprender a ajustar o tamanho, cor e alinhamento do botão para corresponder ao layout fornecido no Figma.

  • Ajuste do tamanho e posição do botão de acordo com as especificações do layout no Figma
  • Remoção das bordas do botão para uma aparência limpa
  • Centralização dos elementos filhos, incluindo o botão, aplicando a propriedade text-align: center

Ajustando o Tamanho e Posição do Botão

O primeiro passo é ajustar o tamanho do botão de acordo com as especificações do layout no Figma, que indicam uma largura de 80 pixels e altura de 40 pixels. Em seguida, as bordas são removidas e o alinhamento é ajustado aplicando a propriedade text-align: center no elemento pai (o nav).

  • Utilização das propriedades width e height para ajustar o tamanho do botão
  • Remoção das bordas do botão para uma aparência limpa
  • Aplicação da propriedade text-align: center para centralizar os elementos filhos, incluindo o botão

Definindo Cores

As cores do botão são definidas utilizando o formato hexadecimal e a propriedade background-color. A cor azul especificada no layout do Figma é utilizada, assim como a cor branca para o texto do botão.

  • Definição das cores do botão utilizando o formato hexadecimal e a propriedade background-color
  • Utilização da cor azul especificada no layout do Figma
  • Utilização da cor branca para o texto do botão

Configurando a Fonte

A fonte também precisa ser personalizada de acordo com o layout. O instrutor aplica as seguintes configurações utilizando as propriedades font-family, font-size e font-weight: Isso define a fonte Inter com tamanho 20px e peso 600.

  • Personalização da fonte de acordo com o layout da página
  • Utilização das propriedades font-family, font-size e font-weight para definir a fonte, tamanho e peso
  • Definição da fonte Inter com tamanho 20px e peso 600

Adicionando Sombra

Para deixar o botão com um visual mais moderno, uma sombra é adicionada utilizando a propriedade box-shadow. O box-shadow permite adicionar sombras em elementos de layout na página. Ele aceita valores para deslocamento horizontal, deslocamento vertical, espalhamento (blur) e cor. No caso do projeto, a sombra é definida com deslocamento horizontal e vertical quase nulos, espalhamento/blur suave e cor azul com 25% de transparência.

  • Adição de sombra para proporcionar um visual moderno ao botão
  • Utilização da propriedade box-shadow para adicionar sombras em elementos de layout
  • Explicação dos valores utilizados para deslocamento horizontal, deslocamento vertical, espalhamento/blur e cor na definição da sombra

Pseudo-Classe Hover

Para criar o efeito hover (passar o mouse por cima) do botão, o instrutor

  • Explicação sobre a criação do efeito hover para o botão
  • Demonstração de como o efeito hover é aplicado

Pseudo-classes no CSS

As pseudo-classes no CSS permitem aplicar estilos em elementos quando eles estão em certos estados, como quando o cursor do mouse passa por cima. A sintaxe para utilizá-las é simples e eficaz, possibilitando uma maior interatividade sem a necessidade de utilizar Javascript.

  • Pseudo-classes no CSS permitem aplicar estilos em elementos em determinados estados, como quando o cursor do mouse passa por cima.
  • A sintaxe para utilizar pseudo-classes é simples e eficaz.
  • Essa técnica possibilita uma maior interatividade sem a necessidade de utilizar Javascript.

Exemplo de Utilização do :hover

Um exemplo prático de utilização das pseudo-classes no CSS é a aplicação do efeito :hover em um link, como no caso do link ‘Home’ que altera a cor de fundo quando o mouse passa por cima. Isso demonstra como é possível criar interatividade de forma simples e eficiente, sem a necessidade de utilizar recursos mais complexos.

  • Um exemplo prático de utilização das pseudo-classes no CSS é a aplicação do efeito :hover em um link.
  • A alteração da cor de fundo ao passar o mouse por cima do link ‘Home’ demonstra a simplicidade e eficiência dessa técnica.
  • Isso mostra como é possível criar interatividade de forma simples e eficiente, sem a necessidade de utilizar recursos mais complexos.

Aplicação de Conceitos Importantes

Ao final do vídeo, o botão de login já está com uma aparência moderna, interativa e customizada de acordo com as especificações do layout. Conceitos importantes como dimensionamento, cores, fontes, alinhamento, sombras e :hover foram aplicados para modificar o visual padrão do botão apenas com CSS, demonstrando a versatilidade da linguagem para criar interfaces ricas sem a necessidade de imagens ou outros recursos.

  • O botão de login apresenta uma aparência moderna, interativa e customizada de acordo com as especificações do layout.
  • Conceitos importantes como dimensionamento, cores, fontes, alinhamento, sombras e :hover foram aplicados para modificar o visual padrão do botão apenas com CSS.
  • Isso demonstra a versatilidade da linguagem para criar interfaces ricas sem a necessidade de imagens ou outros recursos.

Referências Úteis

O artigo também fornece referências úteis, como links para a documentação do W3Schools e da MDN, que podem auxiliar na compreensão e aprofundamento dos conceitos abordados. Essas referências são valiosas para quem deseja aprimorar seus conhecimentos em CSS e pseudo-classes, oferecendo um suporte adicional para o leitor.

  • O artigo fornece referências úteis, como links para a documentação do W3Schools e da MDN.
  • Essas referências podem auxiliar na compreensão e aprofundamento dos conceitos abordados.
  • As referências oferecem um suporte adicional para o leitor que deseja aprimorar seus conhecimentos em CSS e pseudo-classes.

Aprenda mais sobre CSS!

Para complementar seus estudos, recomendo o curso de Introdução à HTML e CSS da DNC, onde disponibilizamos 3 aulas 100% gratuitas pra você aproveitar e dar o primeiro passo na área.

Crie uma conta para obter acesso ao curso e dê o primeiro passo para alavancar sua carreira.

Conclusão

Ao final deste guia, você estará apto a customizar o botão de login do seu site de acordo com as especificações do layout, aplicando conceitos essenciais como dimensionamento, cores, fontes, alinhamento, sombras e hover. A versatilidade do CSS permite criar interfaces ricas e interativas com poucas linhas de código, demonstrando como é possível modificar completamente a aparência de um elemento de forma eficiente.