动画 · 悬停与焦点 · 03

按钮按压

按钮按压 = 按钮在点击瞬间缩小一毫，给出已触发的触感反馈。

尊重 prefers-reduced-motion：动画关闭，仅保留终态。

怎么向 AI 描述它

Add a press state to a button: scale(0.96) on :active, back to 1 on release, 100ms ease-out, transform only.

Swap the scale for a 1px inset shadow on press so the button looks pushed in rather than shrunk.

Combine a 0.96 scale with a brightness dip on :active, key it off a --press-scale variable, and under prefers-reduced-motion replace the transform with a background-tint flash. Never drop below 0.94 so the hit target stays legible.

修改类 Prompt 只动目标，不碰页面其余部分。

按钮按压是什么？

按压动画是你最划算的愉悦感。按钮被点中的瞬间缩小一毫，让点击像真实的物理按键。控制在 0.96、120ms 内——再长就像卡顿而不是反馈。

动画标本

触发: click
技术: css
时长: 1.6s
缓动: ease-in-out
性能: transform

什么时候用

Primary and secondary buttons of any kind
Icon buttons and toggle controls

什么时候别用

Tiny targets where 0.96 makes them hard to read
Loading buttons — the spinner already confirms the tap

Press feedback pairs with hover feedback; define both or the button feels dead between states.

获取代码

.anim-el {
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
:root { --anim-accent: #6d5efc; }

.button-press-btn {
  animation-name: press;
  animation-duration: var(--anim-duration, 1.6s);
  animation-timing-function: var(--anim-easing, ease-in-out);
  border: 0;
  border-radius: 12px;
  padding: 14px 26px;
  font: 600 15px/1 'Plus Jakarta Sans', system-ui, sans-serif;
  color: #fff;
  background: var(--anim-accent);
  cursor: pointer;
}
@keyframes press {
  0%, 100% { transform: scale(1); }
  40%, 60% { transform: scale(0.94); }
}

<button class="button-press-btn anim-el">Press</button>

复制后即可用于你的项目。动效仅作用于 transform / opacity；颜色取自 --anim-accent。

另见

风格

极简→

主题

SaaS 定价页→

组件

按钮→

按钮按压

按钮按压是什么？

动画标本

什么时候用

什么时候别用

另见

组件

动画

风格

主题

Prompt

术语

反模式

按钮按压

按钮按压是什么？

动画 标本

什么时候用

什么时候别用

另见

动画标本