WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Botones animados de redes sociales.
2249
Andev.web
Abrir en el editor
Publica tu código
Recomendado
27 May 2025
Un código de alejandrokundrah
8 July 2025
Selección de personaje con animación de tarjeta de vista previa (sprites CSS)
13 June 2025
Un código de Metehan
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Andev Web</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <ul class="sci"> <li style="--clr: #ff0000;"><a href="#"><i class="fa-brands fa-youtube"></i></a></li> <li style="--clr: #333333;"><a href="#"><i class="fa-brands fa-x-twitter"></i></a></li> <li style="--clr: #00a783;"><a href="#"><i class="fa-brands fa-whatsapp"></i></a></li> </ul> <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.8.1/vanilla-tilt.min.js" integrity="sha512-wC/cunGGDjXSl9OHUH0RuqSyW4YNLlsPwhcLxwWW1CR4OeC2E1xpcdZz2DeQkEmums41laI+eGMw95IJ15SS3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="script.js"></script> </body> </html>
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'; }) })
