Cursor

Magnetic Button

Aussi appelée Magnetic target, Magnetic hover

L’élément est attiré vers le pointeur quand il s’approche, puis revient en place quand il s’éloigne.

Boutons d’appel à l’action, icônes de navigation

  • Magnetic Button
  • Cursor: Magnetic target
  • Codrops magnetic buttons

Voir le code de la démo

Prompt

Remplacez [où] par la partie de votre page, puis collez le prompt dans votre agent IA. Chaque prompt contient le nom de l’animation : la prochaine fois, il vous suffira de la demander par son nom.

Ajoute un effet « Magnetic Button » (aussi appelé magnetic target ou magnetic hover) sur [où].
Quand le pointeur s’approche, le bouton doit être un peu attiré vers lui, son libellé bougeant un peu plus, et quand le pointeur s’éloigne, il doit revenir à sa place avec un petit rebond élastique.
Empêche la mise en page autour de bouger, et désactive l’attraction sur les écrans tactiles et si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Remplacez [où] par la partie de votre page, puis collez le prompt dans votre agent IA. Chaque prompt contient le nom de l’animation : la prochaine fois, il vous suffira de la demander par son nom.