WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Dégradé du curseur de la souris
860
ledoc
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
8 February 2025
Cercle de sélection de couleurs
19 May 2025
Montres connectées de luxe redéfinissant l'élégance et la technologie
21 August 2024
Page de chargement animée
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"); });
