SnippetUI
← Back to snippets

Bouton magnétique

Un composant de bouton magnétique interactif qui suit en douceur le curseur de la souris comme s'il était attiré magnétiquement.

HTMLCSSJavaScript

Aperçu

Il offre une interaction unique dans laquelle le bouton se déplace comme s’il était tiré par le curseur de la souris. L’animation sera automatiquement jouée immédiatement après l’exposition de l’utilisateur.

Cas d’utilisation et fonctionnalités

  • Micro-interaction à fort impact : contrairement aux animations de chemin générales et aux effets de lueur, ce composant intègre le concept de « force magnétique » du suivi de la souris.

  • Parfait pour les sites portfolio/créatifs : Augmentez votre pouvoir de distribution en offrant une petite surprise à vos visiteurs.

  • Effet d’amélioration du CTR : en l’appliquant aux boutons CTA (Call to Action), on pense que cela a pour effet de réduire les obstacles psychologiques à l’affichage et au clic.

  • Réalisé uniquement avec JavaScript : Aucune bibliothèque requise. Une implémentation simple qui met à jour dynamiquement « transform » lors de l’événement « mousemove ».

Points de conception et d’UX

  1. Commentaires basés sur la physique : communiquez intuitivement qu’un bouton est un élément interactif en créant un risque de heurter le curseur.

  2. cubic-bezier(0,23, 1, 0,32, 1) : En utilisant une courbe de type facile à sortir, le mouvement du bouton apparaîtra fluide et serré.

  3. Effet chatoyant : obtenez l’effet d’une lumière fluide avec le pseudo-élément ::before.

  4. Accessibilité : mouseleave revient de manière fiable à sa position d’origine, il n’y a donc aucun problème avec le fonctionnement du clavier ou des appareils tactiles.

Comment personnaliser

Vous pouvez ajuster la force de la force magnétique en modifiant la valeur de la variable « force » :


// 弱め（微妙な動き）

var strength = 0.15;



// 標準

// var strength = 0.35;



// 強め（大きく動く）

// var strength = 0.5;

Pour changer la couleur du bouton, changez simplement le CSS background :


/* サンセット */

background: linear-gradient(135deg, #f97316, #ef4444);



/* オーシャン */

background: linear-gradient(135deg, #06b6d4, #3b82f6);



/* エメラルド */

background: linear-gradient(135deg, #10b981, #059669);

##Code d’implémentation

<button class="magnetic-btn" id="magnetic-btn">

HOVER ME

<span class="magnetic-btn-arrow">→</span>

</button>



<style>
.magnetic-btn {

position: relative;

padding: 18px 48px;

font-size: 1.1rem;

font-weight: 700;

letter-spacing: 0.1em;

color: white;

background: linear-gradient(135deg, #6366f1, #8b5cf6);

border: none;

border-radius: 50px;

cursor: pointer;

outline: none;

box-shadow: 0 20px 60px rgba(99,102,241,0.4);

transition: transform 0.15s cubic-bezier(0.23,1,0.32,1), box-shadow 0.3s ease;

display: inline-flex;

align-items: center;

gap: 10px;

overflow: hidden;

}

.magnetic-btn::before {

content: '';

position: absolute;

top: -50%;

left: -60%;

width: 40%;

height: 200%;

background: rgba(255,255,255,0.15);

transform: skewX(-20deg);

transition: left 0.5s ease;

pointer-events: none;

}

.magnetic-btn:hover::before { left: 120%; }

.magnetic-btn:hover {

box-shadow: 0 30px 80px rgba(139,92,246,0.6), 0 20px 60px rgba(99,102,241,0.4);

}

.magnetic-btn-arrow {

display: inline-flex;

transition: transform 0.3s ease;

pointer-events: none;

}

.magnetic-btn:hover .magnetic-btn-arrow { transform: translateX(4px); }
</style>



<script>

(function() {

var btn = document.getElementById('magnetic-btn');

if (!btn) return;

var strength = 0.35;

btn.addEventListener('mousemove', function(e) {

  var rect = this.getBoundingClientRect();

  var dx = e.clientX - (rect.left + rect.width / 2);

  var dy = e.clientY - (rect.top + rect.height / 2);

  this.style.transform = 'translate(' + (dx*strength) + 'px,' + (dy*strength) + 'px) scale(1.08)';

});

btn.addEventListener('mouseleave', function() {

  this.style.transform = '';

  this.style.boxShadow = '';

});

})();

</script>

État de compatibilité du navigateur

| Navigateur | Statut de compatibilité |

|--------|-------|

| Chrome 60+ | ✅ Entièrement compatible |

| Firefox 55+ | ✅ Entièrement compatible |

| Safari 10.1+ | ✅ Entièrement compatible |

| Bord 79+ | ✅ Entièrement compatible |

L’événement mousemove n’est pas déclenché sur les appareils tactiles, donc l’effet magnétique n’est pas affiché, mais le bouton est cliquable comme d’habitude.