按下Active
视觉效果与操作状态按下控件时立即反馈操作已经发生
按下状态只持续鼠标或手指按住的短暂时刻，常通过颜色加深或轻微下沉提供反馈。它和鼠标移入的悬停 Hover、表示当前选中的状态不是同一件事。
列表项也能按
按住不放看下沉（scale .96），松手弹回；右边按钮少了 active，像没按到
什么时候用
- 让按钮轻微下沉或加深颜色，反馈已经按下按钮→按钮
- 颜色加深一档：不便缩放的元素（小图标、文字按钮）用这个提交提交
- 反馈立刻出现：按下瞬间就要有变化，延迟超过 0.2s 就觉得钝transition: all .1s
- 列表项、卡片 Card 点按：不止按钮，可点的都该有按下反馈列表项一列表项二（按下中）列表项三
什么时候不用
- 和 悬停 Hover 做成一样：悬停和按下分不清，“按到”的确定感没了悬停按下
- 毫无按下反馈：用户怀疑没点上，于是再点一次，提交了两遍确定
- 形变太夸张：缩到 0.8、位移一大截，按个按钮像坐过山车按钮
- 把按下样式当“已选中”用：active 是一瞬间，选中是持续状态已选中？按下只是一瞬间，不是“选中”状态
组成结构 · Anatomy
按钮👇 按下瞬间按钮
1常态Rest没被按下时的样子
2按下瞬间Press指针按下到松手之间的那一瞬
3下沉反馈Sinkscale .97 或加深颜色，给“按到了”的感觉
常见变体 · Variants
缩小下沉Scale
按钮按钮
按钮按下的标配反馈
颜色加深Darken
按钮按钮
不便形变时的替代方案
凹陷Inset
按钮
开关、拨杆的物理感
典型使用场景
按钮按下瞬间
订单金额¥ 199.00
按下瞬间：scale(.97) + 颜色加深，给“按到了”的确定感
列表项点按反馈
列表项点按：背景变深 + 轻微下沉
移动端触摸反馈
我的
我的收藏
消息中心
设置
图标按钮点击
⏮
▶
⏭
图标按钮点击：缩小 + 涟漪扩散