Effet de survol - II

Leçon 31 sur 31 du cours Carte 3D | Projet Front-end de Coddy.

Ce code stylise les boutons de réseaux sociaux à l'intérieur d'un conteneur avec la classe "social-buttons-container" qui se trouve à l'intérieur d'un élément avec la classe "bottom". Voici l'explication détaillée :

Les trois premiers blocs de code configurent les transitions pour les boutons de réseaux sociaux. Chaque bouton a un délai différent avant le début de la transition. Les transitions concernent la propriété "transform" (qui gère probablement le mouvement) et la propriété "box-shadow" (qui contrôle probablement les effets d'ombre). Ces transitions rendent le mouvement du bouton et les changements d'ombre fluides dans le temps.
Le quatrième bloc définit la largeur et la couleur de remplissage pour les icônes SVG (Scalable Vector Graphics) à l'intérieur des boutons de réseaux sociaux.
Le cinquième bloc définit les styles pour lorsqu'un bouton de réseau social est survolé. Il change la couleur d'arrière-plan en noir et change le curseur en pointeur, indiquant qu'il est cliquable.
Le dernier bloc change la couleur de remplissage de l'icône SVG en blanc lorsque le bouton de réseau social est survolé, offrant ainsi un retour visuel à l'utilisateur.

Défi

Facile

Utilisez ce code :

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

Votre carte 3D est prête !

Essayez vous-même

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

Effet de survol - II

Toutes les leçons de Carte 3D | Projet Front-end