按下Active
你可能会说
点下去那一瞬间，点击按钮时需要有明确的按下凹陷反馈。
用户按下或触控元素期间触发的即时物理受力反馈状态。active 通常出现在指针按下到松开之间，键盘激活也应有对应反馈。可以轻微下沉或改变颜色，但幅度要结合组件、品牌和可读性决定，没有固定缩放值；它不是悬停 Hover、持续选中或禁用状态。
也常被叫作按下态激活态:active
你可以这样告诉 AI Agent
请给提交按钮补充短暂按下状态：指针或键盘按下时轻微加深或下沉，松开、移出或取消时立即恢复。不要把它做成持续选中态，也不要改变周围布局。
什么时候用
- 让按钮轻微下沉或加深颜色，反馈已经按下按钮→按钮
- 改变颜色：不适合缩放的小图标或文字按钮也能表达按下状态提交提交
- 反馈及时出现：按下时应可感知，具体时长随输入方式和动效系统调整按下即反馈
- 列表项、卡片 Card 点按：需要表达可点击时可补按下反馈；不要让纯展示内容伪装成可操作列表项一列表项二（按下中）列表项三
什么时候不用
- 与 悬停 Hover 使用完全相同的样式：用户难以确认是否已经按下悬停按下
- 缺少按下反馈：用户可能重复触发操作确定
- 形变幅度过大：会干扰按下状态的识别按钮
- 把按下样式当作已选中状态：active 是短暂状态，选中状态需要持续显示按下状态
组成结构 · Anatomy
按钮👇 按下瞬间按钮
没被按下时的样子
指针按下到松手之间的那一瞬
scale .97 或加深颜色，给“按到了”的感觉
常见变体 · Variants
缩小下沉Scale
按钮按钮
按钮按下的标配反馈
颜色加深Darken
按钮按钮
不便形变时的替代方案
凹陷Inset
按钮
开关、拨杆的物理感
典型使用场景
按钮按下瞬间
订单金额¥ 199.00
按下瞬间：scale(.97) + 颜色加深，给“按到了”的确定感
列表项点按反馈
列表项点按：背景变深 + 轻微下沉
移动端触摸反馈
我的
我的收藏
消息中心
设置
图标按钮点击
⏮
▶
⏭
图标按钮点击：缩小 + 涟漪扩散
延伸阅读 · 权威出处
快速练习