O botão é "atraído" pelo cursor quando ele se aproxima — micro-interação de destaque.
O que é
O elemento se desloca em direção ao cursor quando ele entra na área de influência, como se fosse atraído por um ímã, e volta ao lugar quando o mouse sai.
Como funciona
Usa quickTo do GSAP pra um movimento elástico e fluido, sem travar mesmo com o mouse se movendo rápido. A força do "ímã" é configurável em data-sw-strength.
Exemplos
Botão magnético — chegue perto com o mouse Ao vivo
<button sw-ani="magnetic" sw-btn="pri">o botão é atraído pelo cursor</button>
Força da atração Ao vivo
strength 10
(sem atributo)
strength 60
<button sw-ani="magnetic" data-sw-strength="10">discreto</button>
<button sw-ani="magnetic">padrão</button>
<button sw-ani="magnetic" data-sw-strength="60">bem puxado</button>
<!-- a força usa a grafia data-sw-strength (não sw-ani-strength) -->