Hovering Effect - II

Lição 31 de 31 do curso 3D Card | Front-end Project da Coddy.

Este código está estilizando botões sociais dentro de um contêiner com a classe "social-buttons-container" que está dentro de um elemento com a classe "bottom". Deixe-me detalhar:

Os três primeiros blocos de código configuram transições para os botões sociais. Cada botão tem um atraso diferente antes do início da transição. As transições são para a propriedade "transform" (que provavelmente lida com o movimento) e a propriedade "box-shadow" (que provavelmente controla os efeitos de sombra). Essas transições tornam o movimento do botão e as mudanças de sombra suaves ao longo do tempo.
O quarto bloco define a largura e a cor de preenchimento para os ícones SVG (Scalable Vector Graphics) dentro dos botões sociais.
O quinto bloco configura estilos para quando um botão social é passado o mouse por cima. Ele altera a cor de fundo para preto e muda o cursor para um ponteiro, indicando que é clicável.
O último bloco altera a cor de preenchimento do ícone SVG para branco quando o botão social é passado o mouse por cima, fornecendo feedback visual ao usuário.

Desafio

Fácil

Use este código:

.bottom .social-buttons-container .social-button:first-child {
  transition: transform 0.2s ease-in-out 0.4s, box-shadow 0.2s ease-in-out 0.4s;
}

.bottom .social-buttons-container .social-button:nth-child(2) {
  transition: transform 0.2s ease-in-out 0.6s, box-shadow 0.2s ease-in-out 0.6s;
}

.bottom .social-buttons-container .social-button:nth-child(3) {
  transition: transform 0.2s ease-in-out 0.8s, box-shadow 0.2s ease-in-out 0.8s;
}

.bottom .social-buttons-container .social-button .svg {
  width: 15px;
  fill: #008982;
}

.bottom .social-buttons-container .social-button:hover {
  background: black;
  cursor: pointer;
}

.bottom .social-buttons-container .social-button:hover .svg {
  fill: white;
}

.glass{
  border-top-right-radius: 100%;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.349) 0%, rgba(255, 255, 255, 0.815) 100%);
  transform: translate3d(0px, 0px, 25px);
  transition: all 0.5s ease-in-out;
}

Seu cartão 3D está pronto!

Experimente você mesmo

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

Hovering Effect - II

Todas as lições de 3D Card | Front-end Project