按钮按压感

:active 时按钮沉下去 3 像素，底影同步变薄

全平台通用动效与背景内容区效果

实时预览（拖动参数，立刻看变化）

代码

<button class="press">按我试试</button>
<style>
.press { background: #141414; color: #fff; border: none; padding: 12px 24px; border-radius: 999px;
  font-weight: 600; box-shadow: 0 4px 0 #000; transition: all .12s; cursor: pointer; }
.press:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
/* 反馈必须在 100ms 量级发生，transition 别超过 .15s */
</style>

<button class="rounded-full bg-neutral-900 px-6 py-3 font-semibold text-white shadow-[0_4px_0_#000] transition-all duration-100 active:translate-y-[3px] active:shadow-[0_1px_0_#000]">按我试试</button>

export function PressButton({ children, onClick }) {
  return (<button onClick={onClick} className="press-btn">{children}
    <style>{`.press-btn{background:#141414;color:#fff;border:none;padding:12px 24px;border-radius:999px;font-weight:600;box-shadow:0 4px 0 #000;transition:all .12s;cursor:pointer}
    .press-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #000}`}</style></button>);
}

代码片段以 MIT 释出，可自由复制改用。

这个效果是怎么实现的

它是怎么工作的（中文）

给按钮一条 4px 的实底边阴影装作「厚度」，:active 时 translateY 沉 3px、阴影收到 1px——眼睛立刻读成「按进去了」。要点是快：过渡 100ms 量级，拖泥带水就假了。没有实体厚度的扁平按钮，则用 scale(.97) 的微缩替代。

How it works (English)

Give the button a 4px solid bottom shadow as fake 'thickness'; on :active, translateY down 3px and shrink the shadow to 1px — the eye instantly reads 'pressed in'. Speed is the point: transitions around 100ms; sluggish feels fake. For flat buttons without thickness, a scale(.97) micro-shrink is the substitute.

参考与来源 Sources

本条为「批次 1（重建）」成果（2026-11-10 用户决定：原妞妞老师素材不导出，改由公开材料重建）：效果概念参考开源效果生态——Magic UI（MIT）、Uiverse（MIT）、Animista、Paper Shaders（Apache-2.0）、tsParticles（MIT）、CSS Loaders（MIT）等（见 /resources 对应条目，许可以各项目为准）；本站的实现代码、参数体系与全部文案均为 Aglaia 原创，未复制上述项目的代码或文案，也与妞妞老师原始素材无关。

配套提示词

按钮按压感 · 提示词待复验 · →