磁吸按钮
Magnetic Button
别名:磁吸按钮磁性按钮按钮被鼠标吸过去鼠标靠近按钮偏移magnetic effect磁力吸附
这是什么
鼠标靠近按钮时，按钮像被磁铁吸住一样朝光标方向偏移一小段距离， 离开后弹性归位。偏移量按光标与按钮中心的距离计算，通常限制在 8～20px。 一种高"手感"的桌面端彩蛋交互，常出现在作品集与创意官网。
交互实验室
试一试，再决定怎么用正在加载演示…
✓ 适用场景
- 落地页的 CTA、导航图标等少量关键按钮
- 创意类 / 作品集网站的品牌调性
- 桌面端为主、留白充足的布局
✕ 不适用场景
- 触屏设备（没有 hover，效果失效）
- 表单控件与密集操作区（偏移破坏瞄准）
- 页面大量按钮全部磁吸（眩晕且廉价）
常见形式
平移跟随
Translate follow
按钮整体向光标平移，最基础
按钮与文字分层跟随
Layered follow
文字比外壳多移一档，产生视差
磁吸 + 微倾斜
Magnet + tilt
叠加轻微 rotateX/Y，立体感更强
实现要点
transform: translatetransitionmousemovegetBoundingClientRect在按钮（或更大的热区）上监听 mousemove，用 getBoundingClientRect 求光标相对 中心的比例，乘以最大偏移（如 0.3 × 40px）写入 transform: translate； mouseleave 时归零并给 300～500ms 的弹性过渡（cubic-bezier(.2,.8,.3,1.2)）。 进入热区时把 transition 缩短到 100ms 让跟随更"黏"。 触屏直接禁用，配 @media (hover:hover)。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
为项目的主 CTA 按钮添加磁吸交互。 先确认按钮组件结构与强调色令牌，保持一致。 要求： - 热区 1.5 倍按钮大小，偏移上限 12px，跟随 100ms 弹回 400ms - 键盘焦点与触屏行为不受影响 - 尊重 prefers-reduced-motion - 不引入新依赖 完成后运行现有检查，说明修改文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
鼠标悬停时卡片或按钮轻轻上浮（translateY -2～6px）并加深投影， 像被无形的手托起。最常见的"这个可以点"的桌面端暗示， 成本极低但立刻让页面有层次和呼吸感。
动效相似概念用户按下按钮、卡片等可点击元素时，元素轻微缩小（通常 0.95～0.98）， 松开后弹回。一个几十毫秒的细节，让界面"手感"立刻从网页变成实体按键。
动效相似概念鼠标悬停时元素边缘泛出柔和光晕，用外发光阴影或径向渐变沿边框晕开， 颜色多为品牌强调色。相比投影的"物理抬升"，光晕暗示的是"能量"与"可交互"， 常用于深色界面、游戏感产品与霓虹风格按钮。
动效相似概念元素到位后不是稳稳停住，而是带一两次越过后回弹的振荡， 像有弹性地"Q 一下"。 给界面注入物理感和俏皮感， 常用于成功状态、奖励时刻或品牌化入场。
动效相似概念