按压反馈
Press Feedback
别名:点击反馈按钮缩一下按下缩放按压缩小tap feedbackactive scale
这是什么
用户按下按钮、卡片等可点击元素时，元素轻微缩小（通常 0.95～0.98）， 松开后弹回。一个几十毫秒的细节，让界面"手感"立刻从网页变成实体按键。
交互实验室
试一试，再决定怎么用正在加载演示…
✓ 适用场景
- 所有可点击元素：按钮、卡片、图标按钮
- 移动端与触屏界面（按压是最主要操作）
- 需要"实体感"的产品调性
✕ 不适用场景
- 大面积区域点击（整卡缩放会带动文字晃动）
- 列表行内小操作，避免整行抖动
- 已有其他强反馈（如下压阴影 + 填充动画）叠加过度
常见形式
缩放
Scale
最常用，scale(0.96)
缩放 + 阴影收紧
Scale + shadow
同时收小阴影，模拟"按下去"
变暗
Darken
不缩放，降低亮度，适合桌面
实现要点
transform: scaletransition:active用 :active 伪类配合 transition: transform 80ms；缩放原点默认中心。 松开的回弹可稍微放缓 transition（150ms）模拟弹簧。纯 CSS 即可实现，无需 JS。 移动端注意 :active 需要 touchstart 监听或 -webkit-tap-highlight 处理才能稳定触发。
横向对比
查看完整对比 →交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
在当前项目中为所有可点击元素统一添加按压反馈。 先检查是否已有全局按钮样式或交互规范，保持一致。 要求： - 按下 scale(0.96) + 阴影收紧，80ms 缩下 150ms 回弹 - 覆盖 Button 组件与可点击卡片 - 触屏设备可靠触发 - 尊重 prefers-reduced-motion - 不引入新依赖 完成后运行现有检查，说明修改文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
鼠标悬停时卡片或按钮轻轻上浮（translateY -2～6px）并加深投影， 像被无形的手托起。最常见的"这个可以点"的桌面端暗示， 成本极低但立刻让页面有层次和呼吸感。
动效相似概念鼠标靠近按钮时，按钮像被磁铁吸住一样朝光标方向偏移一小段距离， 离开后弹性归位。偏移量按光标与按钮中心的距离计算，通常限制在 8～20px。 一种高"手感"的桌面端彩蛋交互，常出现在作品集与创意官网。
动效相似概念点击位置向外扩散一圈半透明圆形波纹后消散，把"点中了哪里"可视化。 Material Design 的标志性按压反馈， 让无生命的点击立刻获得物理感——像石头落进水面。
动效相似概念用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件替代方案