Эффект наведения - II

Урок 31 из 31 курса 3D-карточка | Front-end проект на Coddy.

Этот код стилизует кнопки социальных сетей внутри контейнера с классом "social-buttons-container", который находится внутри элемента с классом "bottom". Позвольте мне разобрать его подробно:

Первые три блока кода настраивают переходы (transitions) для кнопок социальных сетей. Каждая кнопка имеет разную задержку перед началом перехода. Переходы настроены для свойства "transform" (которое, вероятно, отвечает за перемещение) и свойства "box-shadow" (которое, вероятно, управляет эффектами тени). Эти переходы делают движение кнопок и изменение теней плавными во времени.
Четвертый блок устанавливает ширину и цвет заливки для иконок SVG (Scalable Vector Graphics) внутри кнопок социальных сетей.
Пятый блок настраивает стили для случаев, когда на кнопку социальной сети наведен курсор. Он меняет цвет фона на черный и меняет курсор на указатель (pointer), показывая, что на кнопку можно нажать.
Последний блок меняет цвет заливки иконки SVG на белый при наведении курсора на кнопку социальной сети, обеспечивая визуальную обратную связь для пользователя.

Задание

Легко

Используйте этот код:

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

Ваша 3D-карта готова!

Попробуйте сами

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

Эффект наведения - II

Все уроки раздела 3D-карточка | Front-end проект