WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Gradiente del cursore del mouse
676
ledoc
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
18 November 2024
Bagliore della carta CSS
10 April 2025
Sito web del blog di Daniel
30 May 2025
Codifica manuale della pagina di accesso di Facebook
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"); });
