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.
3011
Andev.web
Abrir en el editor
Video
Publica tu código
2
Recomendado
27 May 2025
Un código de alejandrokundrah
4 June 2025
Un código de Mete
31 July 2025
Ejemplo de botón de neón HTML
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'; }) })