pattern @community/pattern-button-press-feedback

Button Press Feedback

按钮按下瞬间 scale(0.97-0.98) + 颜色加深 + 80-120ms 极短反馈，模拟物理按键的'按下去'感。iOS / Linear / Arc / Vercel 标志性触感，让点击从'click'变成'按下'。

Skill: @community
Domain: frontend-design
Version: 1.0.0
Quality: 0.0
Edges: 0 out · 0 in
Tokens: 45/595/1247

$ aoe install @community/pattern-button-press-feedback

Projection

3 levels · agent picks one per query

Always in _index.xml · the agent never has to ask for this.

ButtonPressFeedback [pattern] v1.0.0

按钮按下瞬间 scale(0.97-0.98) + 颜色加深 + 80-120ms 极短反馈，模拟物理按键的'按下去'感。iOS / Linear / Arc / Vercel 标志性触感，让点击从'click'变成'按下'。

Loaded when retrieval picks the atom as adjacent / supporting.

ButtonPressFeedback [pattern] v1.0.0

按钮按下瞬间 scale(0.97-0.98) + 颜色加深 + 80-120ms 极短反馈，模拟物理按键的'按下去'感。iOS / Linear / Arc / Vercel 标志性触感，让点击从'click'变成'按下'。

Label

Button Press Feedback

Problem

纯 :hover 和 :focus 状态变化对'按下'这个瞬间没有反馈。用户在按下到松开之间（typical 50-150ms）盯着按钮，如果零变化会怀疑'我点中了吗'，尤其在网络延迟时反复点击。

Solution

在 :active 时 transform: scale(0.97) + 短时长（80-120ms ease-out），松开自动回弹。配合 background-color 加深 4-8% 强化触感。

Structure

    <button class="press">Save changes</button>

Styles

    .press {
      transition:
        transform 100ms cubic-bezier(0.16, 1, 0.3, 1),
        background-color 100ms ease-out,
        box-shadow 100ms ease-out;
      background: oklch(60% 0.18 250);
      color: oklch(98% 0.01 250);
      box-shadow: 0 1px 2px oklch(20% 0.04 240 / 0.12);
    }
    .press:hover {
      background: oklch(56% 0.18 250);
    }
    .press:active {
      transform: scale(0.97);
      background: oklch(50% 0.18 250);
      box-shadow: 0 0 0 oklch(20% 0.04 240 / 0.12);
      transition-duration: 60ms;
    }
    .press:focus-visible {
      outline: 2px solid oklch(70% 0.16 250);
      outline-offset: 2px;
    }
    @media (prefers-reduced-motion: reduce) {
      .press { transition: background-color 100ms linear; }
      .press:active {
        transform: none;
        background: oklch(50% 0.18 250);
      }
    }

Timing

Duration: 80-120ms press, 60ms on press-down (asymmetric)
Easing: ease-out / cubic-bezier(0.16, 1, 0.3, 1)
Scale: 0.96-0.98 (never below 0.95)

Interaction

鼠标 :active：scale(0.97) + 颜色加深，60ms 内完成
鼠标 release：松开瞬间回弹到 1.0，100-120ms 配合强 easing 形成轻微 overshoot 感
键盘 Space / Enter：按下时同样进入 :active 状态（浏览器原生行为，但要确保 CSS 没禁掉）
触屏 tap：直接进入 :active，因移动端无 hover 中间态
长按状态：scale 保持，不要继续往下缩

A11y

prefers-reduced-motion: reduce 时禁用 transform，保留 background-color 变化作反馈（颜色变化不引发眩晕）
scale 缩放范围 ≥ 0.95：低于 0.92 会让按钮文字模糊难读
禁用按钮 [disabled] 必须移除 :active 状态（否则按了没反应造成困惑）
确保 :focus-visible outline 在 :active 时仍然可见（不要被 transform 裁掉）

Behavior

按下时长 60ms 比松开时长 100ms 短：模拟'快速接触 → 缓慢回弹'的物理过程
scale 变化必须配合 background 变化——纯 scale 显得'按虚了'
transition 必须包含 transform，不能只 transition: all（性能抖动）
box-shadow 同步压缩到 0：模拟按钮被'压扁'到表面
永远不要给 :active 加超过 200ms 的过渡——按下到松开通常 < 150ms，过渡未结束用户已松开

Loaded when retrieval picks the atom as a focal / direct hit.

ButtonPressFeedback [pattern] v1.0.0

按钮按下瞬间 scale(0.97-0.98) + 颜色加深 + 80-120ms 极短反馈，模拟物理按键的'按下去'感。iOS / Linear / Arc / Vercel 标志性触感，让点击从'click'变成'按下'。

Label

Button Press Feedback

Problem

Solution

在 :active 时 transform: scale(0.97) + 短时长（80-120ms ease-out），松开自动回弹。配合 background-color 加深 4-8% 强化触感。

Structure

    <button class="press">Save changes</button>

Styles

    .press {
      transition:
        transform 100ms cubic-bezier(0.16, 1, 0.3, 1),
        background-color 100ms ease-out,
        box-shadow 100ms ease-out;
      background: oklch(60% 0.18 250);
      color: oklch(98% 0.01 250);
      box-shadow: 0 1px 2px oklch(20% 0.04 240 / 0.12);
    }
    .press:hover {
      background: oklch(56% 0.18 250);
    }
    .press:active {
      transform: scale(0.97);
      background: oklch(50% 0.18 250);
      box-shadow: 0 0 0 oklch(20% 0.04 240 / 0.12);
      transition-duration: 60ms;
    }
    .press:focus-visible {
      outline: 2px solid oklch(70% 0.16 250);
      outline-offset: 2px;
    }
    @media (prefers-reduced-motion: reduce) {
      .press { transition: background-color 100ms linear; }
      .press:active {
        transform: none;
        background: oklch(50% 0.18 250);
      }
    }

Timing

Duration: 80-120ms press, 60ms on press-down (asymmetric)
Easing: ease-out / cubic-bezier(0.16, 1, 0.3, 1)
Scale: 0.96-0.98 (never below 0.95)

Interaction

鼠标 :active：scale(0.97) + 颜色加深，60ms 内完成
鼠标 release：松开瞬间回弹到 1.0，100-120ms 配合强 easing 形成轻微 overshoot 感
键盘 Space / Enter：按下时同样进入 :active 状态（浏览器原生行为，但要确保 CSS 没禁掉）
触屏 tap：直接进入 :active，因移动端无 hover 中间态
长按状态：scale 保持，不要继续往下缩

A11y

prefers-reduced-motion: reduce 时禁用 transform，保留 background-color 变化作反馈（颜色变化不引发眩晕）
scale 缩放范围 ≥ 0.95：低于 0.92 会让按钮文字模糊难读
禁用按钮 [disabled] 必须移除 :active 状态（否则按了没反应造成困惑）
确保 :focus-visible outline 在 :active 时仍然可见（不要被 transform 裁掉）

Behavior

按下时长 60ms 比松开时长 100ms 短：模拟'快速接触 → 缓慢回弹'的物理过程
scale 变化必须配合 background 变化——纯 scale 显得'按虚了'
transition 必须包含 transform，不能只 transition: all（性能抖动）
box-shadow 同步压缩到 0：模拟按钮被'压扁'到表面
永远不要给 :active 加超过 200ms 的过渡——按下到松开通常 < 150ms，过渡未结束用户已松开

Relations

related: [@community/pattern-hover-lift, @community/fact-hover-feedback-latency, @community/fact-easing-mood-mapping, @community/fact-duration-perception-thresholds, @community/fact-motion-as-feedback, @community/constraint-reduced-motion, @community/check-touch-target-min, @community/check-focus-visible, @community/anti-pattern-tiny-touch-targets, @community/anti-pattern-invisible-focus]

Label

Button Press Feedback

Problem

Solution

在 :active 时 transform: scale(0.97) + 短时长（80-120ms ease-out），松开自动回弹。配合 background-color 加深 4-8% 强化触感。

Structure

    <button class="press">Save changes</button>

Styles

    .press {
      transition:
        transform 100ms cubic-bezier(0.16, 1, 0.3, 1),
        background-color 100ms ease-out,
        box-shadow 100ms ease-out;
      background: oklch(60% 0.18 250);
      color: oklch(98% 0.01 250);
      box-shadow: 0 1px 2px oklch(20% 0.04 240 / 0.12);
    }
    .press:hover {
      background: oklch(56% 0.18 250);
    }
    .press:active {
      transform: scale(0.97);
      background: oklch(50% 0.18 250);
      box-shadow: 0 0 0 oklch(20% 0.04 240 / 0.12);
      transition-duration: 60ms;
    }
    .press:focus-visible {
      outline: 2px solid oklch(70% 0.16 250);
      outline-offset: 2px;
    }
    @media (prefers-reduced-motion: reduce) {
      .press { transition: background-color 100ms linear; }
      .press:active {
        transform: none;
        background: oklch(50% 0.18 250);
      }
    }

Timing

Duration: 80-120ms press, 60ms on press-down (asymmetric)
Easing: ease-out / cubic-bezier(0.16, 1, 0.3, 1)
Scale: 0.96-0.98 (never below 0.95)

Interaction

鼠标 :active：scale(0.97) + 颜色加深，60ms 内完成
鼠标 release：松开瞬间回弹到 1.0，100-120ms 配合强 easing 形成轻微 overshoot 感
键盘 Space / Enter：按下时同样进入 :active 状态（浏览器原生行为，但要确保 CSS 没禁掉）
触屏 tap：直接进入 :active，因移动端无 hover 中间态
长按状态：scale 保持，不要继续往下缩

A11y

prefers-reduced-motion: reduce 时禁用 transform，保留 background-color 变化作反馈（颜色变化不引发眩晕）
scale 缩放范围 ≥ 0.95：低于 0.92 会让按钮文字模糊难读
禁用按钮 [disabled] 必须移除 :active 状态（否则按了没反应造成困惑）
确保 :focus-visible outline 在 :active 时仍然可见（不要被 transform 裁掉）

Behavior

按下时长 60ms 比松开时长 100ms 短：模拟'快速接触 → 缓慢回弹'的物理过程
scale 变化必须配合 background 变化——纯 scale 显得'按虚了'
transition 必须包含 transform，不能只 transition: all（性能抖动）
box-shadow 同步压缩到 0：模拟按钮被'压扁'到表面
永远不要给 :active 加超过 200ms 的过渡——按下到松开通常 < 150ms，过渡未结束用户已松开

Source

where the compiled artifact came from

aoe-engine/examples/frontend-design/primes/compiled/@community/pattern-button-press-feedback/atom.yaml

Button Press Feedback

Projection

ButtonPressFeedback [pattern] v1.0.0

ButtonPressFeedback [pattern] v1.0.0

Label

Meta

Problem

Solution

Structure

Styles

Timing

Interaction

A11y

Behavior

ButtonPressFeedback [pattern] v1.0.0

Label

Meta

Problem

Solution

Structure

Styles

Timing

Interaction

A11y

Behavior

Relations

Label

Meta

Problem

Solution

Structure

Styles

Timing

Interaction

A11y

Behavior

Source