Button Press Feel
On :active the button sinks 3px and its bottom shadow thins with it
Live preview (drag the parameters, watch it change)
Code
<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>);
}Code snippets are MIT-licensed — copy and adapt freely.
How this effect works
它是怎么工作的（中文）
给按钮一条 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 原创，未复制上述项目的代码或文案，也与 妞妞老师 原始素材无关。