Hovering Effect - II

Lesson 31 of 31 in Coddy's 3D Card | Front-end Project course.

This code is styling social buttons within a container with the class "social-buttons-container" that is inside an element with the class "bottom". Let me break it down:

The first three blocks of code set up transitions for the social buttons. Each button has a different delay before the transition starts. The transitions are for the "transform" property (which likely handles movement) and the "box-shadow" property (which likely controls shadow effects). These transitions make the button movement and shadow changes smooth over time.
The fourth block sets the width and fill color for the SVG (Scalable Vector Graphics) icons inside the social buttons.
The fifth block sets up styles for when a social button is hovered over. It changes the background color to black and changes the cursor to a pointer, indicating it's clickable.
The last block changes the fill color of the SVG icon to white when the social button is hovered over, providing visual feedback to the user.

Challenge

Easy

Use this 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;
}

Your 3d card is ready!

Try it yourself

<!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

All lessons in 3D Card | Front-end Project