WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Dégradé du curseur de la souris
1015
ledoc
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
27 December 2024
Un code par efficientfunction480
26 December 2024
Un code par efficientcloud646
16 September 2025
Carrousel de cartes 3D HTML CSS JavaScript
HTML
Copy
Hover me
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"); });