Cursor

Magnetic Button (磁吸按鈕)

別稱 Magnetic target, Magnetic hover

游標靠近時元素被吸向游標,離開後又彈回原位。

CTA 按鈕、導覽圖示

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

查看示範原始碼

提示詞

將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。

在[套用位置]加入「磁吸按鈕」(Magnetic Button) 效果,也叫磁吸目標 (magnetic target) 或磁吸懸停 (magnetic hover)。
游標靠近時,按鈕被輕輕吸向游標,按鈕文字移動得再多一點;游標離開後,按鈕帶著一點小彈跳回到原位。
不要讓周圍版面跟著移動;在觸控裝置上,或者如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就關閉吸附。

將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。