Cursor

Magnetic Button

Também chamada Magnetic target, Magnetic hover

O elemento é puxado em direção ao ponteiro quando ele se aproxima e volta ao lugar quando ele se afasta.

Botões de CTA, ícones de navegação

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

Ver o código da demo

Prompt

Substitua [onde] pela parte da sua página e cole o prompt no seu agente de IA. Cada prompt traz o nome da animação, então da próxima vez basta pedir pelo nome.

Adicione um efeito "Magnetic Button" (também chamado magnetic target ou magnetic hover) em [onde].
Quando o ponteiro se aproximar, o botão deve ser puxado um pouco em direção a ele, com o texto se movendo um pouco mais, e quando o ponteiro sair ele deve voltar ao lugar com um pequeno quique elástico.
Não deixe o layout ao redor se mexer, e desative a atração em dispositivos de toque e se o usuário preferir movimento reduzido (prefers-reduced-motion).

Substitua [onde] pela parte da sua página e cole o prompt no seu agente de IA. Cada prompt traz o nome da animação, então da próxima vez basta pedir pelo nome.