WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Gradiente do cursor do mouse
926
ledoc
Abrir no Editor
Publique Seu Código
Recomendado
6 August 2025
Carrossel Brilhante: Texto Gradiente e Pop-ups em Movimento
1 December 2024
Um código por ledoc
9 June 2025
Pena caindo
HTML
Copy
<button class="mouse-cursor-gradient-tracking"> <span>Hover me</span> </button>
CSS
Copy
.mouse-cursor-gradient-tracking { position: relative; background: #7983ff; padding: 0.5rem 1rem; font-size: 1.2rem; border: none; color: white; cursor: pointer; outline: none; overflow: hidden; } .mouse-cursor-gradient-tracking span { position: relative; } .mouse-cursor-gradient-tracking::before { --size: 0; content: ""; position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); background: radial-gradient(circle closest-side, pink, transparent); transform: translate(-50%, -50%); transition: width 0.2s ease, height 0.2s ease; } .mouse-cursor-gradient-tracking:hover::before { --size: 200px; }
JS
Copy
let btn = document.querySelector(".mouse-cursor-gradient-tracking"); btn.addEventListener("mousemove", (e) => { let rect = e.target.getBoundingClientRect(); let x = e.clientX - rect.left; let y = e.clientY - rect.top; btn.style.setProperty("--x", x + "px"); btn.style.setProperty("--y", y + "px"); });
