WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animated social media buttons
2830
Andev.web
Open In Editor
Publish Your Code
Recommended
28 November 2024
Matrix Animated Background
25 August 2024
Animated Bio / About Page
22 June 2025
Animated Lamp
HTML
Copy
Andev Web
CSS
Copy
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; height: 100vh; transition: 0.5s; } .sci{ position: relative; display: flex; gap: 40px; } .sci li{ list-style: none; } .sci li a{ position: relative; display: flex; justify-content: center; align-items: center; width: 150px; height: 150px; background: #fff; color: #333; font-size: 4em; text-decoration: none; border-radius: 10px; transform-style: preserve-3d; transition: background 0.25s; box-shadow: 0 25px 35px rgba(0, 0, 0, 0.1); } .sci li a:hover{ background: var(--clr); box-shadow: 0 25px 35px rgba(0, 0, 0, 0.25); border: 5px solid var(--clr); } .sci li a i{ transition: 0.5s; pointer-events: none; } .sci li a:hover i{ transform: scale(1.5) translateZ(50px); color: #fff; }
JS
Copy
VanillaTilt.init(document.querySelectorAll(".sci li a"), { max: 30, speed: 400, glare: true }); let list = document.querySelectorAll('.sci li'); let bg = document.querySelector('body'); list.forEach(element => { element.addEventListener('mouseenter', function(event){ let color = event.target.style.getPropertyValue('--clr'); bg.style.backgroundColor = color; }) element.addEventListener('mouseleave', function(event){ bg.style.backgroundColor = '#fff'; }) })