BUTTON
磁吸按钮Magnetic Button
鼠标靠近时按钮像被磁铁吸住一样朝光标偏移，离开后弹性回位。
效果预览
鼠标靠近时按钮会被"吸"过去
适合用在哪
创意机构官网、作品集、高端品牌站；把"好玩"做进交互。
容易踩的坑
- 偏移量超过 12px，按钮像在躲避光标，用户点击时容易点空。
- mousemove 每次直接改 left/top 而不用 transform，会触发布局重排导致卡顿。
- 触屏设备未用 (hover: hover) 检测降级，首次点击可能触发错位跳动。
设计提示词 · Prompt
磁吸按钮（Magnetic Button）：监听按钮外层 80-120px 范围的 mousemove，计算光标与按钮中心的偏移向量，按钮按偏移量的 20-30% 跟随位移（translate），同时 text 内层可再乘 1.5 倍系数做二次视差。mouseleave 时用 spring 缓动回位——transition:cubic-bezier(.34,1.56,.64,1) 300ms 带回弹。按钮本身放大 5% 也不错。整体必须克制：偏移上限 8-12px，否则像 bug。桌面端专属，触屏设备自动降级为普通按钮。
Magnetic Button: listen for mousemove within an 80-120px area around the button, compute the offset vector between the cursor and the button center, and move the button by 20-30% of that offset (translate); the inner text layer can additionally multiply by a 1.5x factor for secondary parallax. On mouseleave, return with spring easing — transition:cubic-bezier(.34,1.56,.64,1) 300ms with overshoot. Scaling the button up 5% also works well. Keep it restrained overall: cap the offset at 8-12px, otherwise it looks like a bug. Desktop only; touch devices automatically fall back to a normal button.
常见搭配
同一页面里经常和「磁吸按钮」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-magnet"> <button class="d-magnet__btn">✦ 和我聊聊</button> <span class="d-tiny">鼠标靠近时按钮会被"吸"过去</span> </div>