Efek Hover: II

Pelajaran 31 dari 31 dalam kursus Kartu 3D | Proyek Front-end di Coddy.

Kode ini mengatur gaya tombol sosial di dalam container dengan class "social-buttons-container" yang berada di dalam elemen dengan class "bottom". Mari kita bahas:

Tiga blok kode pertama mengatur transisi untuk tombol sosial. Setiap tombol memiliki jeda yang berbeda sebelum transisi dimulai. Transisi berlaku untuk property "transform" (yang kemungkinan mengatur pergerakan) dan property "box-shadow" (yang kemungkinan mengatur efek bayangan). Transisi ini membuat pergerakan tombol dan perubahan bayangan berlangsung dengan mulus seiring waktu.
Blok keempat mengatur lebar dan warna isian ikon SVG (Scalable Vector Graphics) di dalam tombol sosial.
Blok kelima mengatur gaya saat kursor diarahkan ke tombol sosial. Warna latar berubah menjadi hitam dan kursor berubah menjadi penunjuk, yang menandakan bahwa tombol dapat diklik.
Blok terakhir mengubah warna isian ikon SVG menjadi putih saat kursor diarahkan ke tombol sosial, sehingga memberikan umpan balik visual kepada pengguna.

Tantangan

Mudah

Gunakan kode ini:

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

Kartu 3D-mu siap!

Coba sendiri

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Tulis kode HTML di sini -->
        <script src="script.js"></script>
    </body>
</html>

Semua pelajaran di Kartu 3D | Proyek Front-end

Latihan sendiri: Playground Web