WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animated social media buttons
2513
Andev.web
Open In Editor
Publish Your Code
Recommended
14 October 2024
Social Icons
25 November 2023
On Hover Animated Button
6 September 2025
CSS Animated Progress Bar HTML Structure
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'; }) })