WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animación del botón de desplazamiento CSS
2510
lebdev
Abrir en el editor
Publica tu código
Recomendado
14 May 2025
Un código de toninrazafison
5 July 2025
Página de inicio con efecto de falla: HTML, CSS, Tailwind
22 August 2025
Comentario de marcador de posición de código HTML
HTML
Copy
Hover Me
CSS
Copy
:root{ --color: #95f9fe; } * { margin: 0; padding:0; box-sizing: border-box; } body { background: #252525; color: #fff; display: flex; align-items: center; justify-content: center; height: 100vh; } button { position: relative; padding: 12px 35px; background: var(--color); font-size: 17px; font-weight: 500; color: #181818; border: 3px solid var(--color); border-radius: 8px; box-shadow: 0 0 0 #fec1958c; transition: all .3s ease-in-out; cursor: pointer; } .star-1 { position: absolute; top: 20%; left: 20%; width: 25px; height: auto; filter: drop-shadow(0 0 0 #fffdef); z-index: -5; transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96); } .star-2 { position: absolute; top: 45%; left: 45%; width: 15px; height: auto; filter: drop-shadow(0 0 0 #fffdef); z-index: -5; transition: all 1s cubic-bezier(0, 0.4, 0, 1.01); } .star-3 { position: absolute; top: 40%; left: 40%; width: 5px; height: auto; filter: drop-shadow(0 0 0 #fffdef); z-index: -5; transition: all 1s cubic-bezier(0, 0.4, 0, 1.01); } .star-4 { position: absolute; top: 20%; left: 40%; width: 8px; height: auto; filter: drop-shadow(0 0 0 #fffdef); z-index: -5; transition: all .8s cubic-bezier(0, 0.4, 0, 1.01); } .star-5 { position: absolute; top: 25%; left: 45%; width: 15px; height: auto; filter: drop-shadow(0 0 0 #fffdef); z-index: -5; transition: all .6s cubic-bezier(0, 0.4, 0, 1.01); } .star-6 { position: absolute; top: 5%; left: 50%; width: 5px; height: auto; filter: drop-shadow(0 0 0 #fffdef); z-index: -5; transition: all .8s ease; } button:hover { background: transparent; color: var(--color); box-shadow: 0 0 25px #fec1958c; } button:hover .star-1 { position: absolute; top: -80%; left: -30%; width: 25px; height: auto; filter: drop-shadow(0 0 10px #fffdef); z-index: 2; } button:hover .star-2 { position: absolute; top: -25%; left: 10%; width: 15px; height: auto; filter: drop-shadow(0 0 10px #fffdef); z-index: 2; } button:hover .star-3 { position: absolute; top: 55%; left: 25%; width: 5px; height: auto; filter: drop-shadow(0 0 10px #fffdef); z-index: 2; } button:hover .star-4 { position: absolute; top: 30%; left: 80%; width: 8px; height: auto; filter: drop-shadow(0 0 10px #fffdef); z-index: 2; } button:hover .star-5 { position: absolute; top: 25%; left: 115%; width: 15px; height: auto; filter: drop-shadow(0 0 10px #fffdef); z-index: 2; } button:hover .star-6 { position: absolute; top: 5%; left: 60%; width: 5px; height: auto; filter: drop-shadow(0 0 10px #fffdef); z-index: 2; } .fil0 { fill: #FFFDEF }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */