Efecto hover - II

Lección 31 de 31 del curso Tarjeta 3D | Proyecto Front-end de Coddy.

Este código aplica estilos a los botones sociales dentro de un contenedor con la clase "social-buttons-container" que se encuentra dentro de un elemento con la clase "bottom". Permítame desglosarlo:

Los tres primeros bloques de código configuran las transiciones para los botones sociales. Cada botón tiene un retraso diferente antes de que comience la transición. Las transiciones son para la propiedad "transform" (que probablemente maneja el movimiento) y la propiedad "box-shadow" (que probablemente controla los efectos de sombra). Estas transiciones hacen que el movimiento del botón y los cambios de sombra sean fluidos con el tiempo.
El cuarto bloque establece el ancho y el color de relleno para los iconos SVG (Scalable Vector Graphics) dentro de los botones sociales.
El quinto bloque establece los estilos para cuando se pasa el cursor sobre un botón social. Cambia el color de fondo a negro y cambia el cursor a un puntero, indicando que se puede hacer clic.
El último bloque cambia el color de relleno del icono SVG a blanco cuando se pasa el cursor sobre el botón social, proporcionando retroalimentación visual al usuario.

Desafío

Fácil

Usa 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;
}

¡Tu tarjeta 3D está lista!

Pruébalo tú mismo

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

Efecto hover - II

Todas las lecciones de Tarjeta 3D | Proyecto Front-end