BUTTON
按压按钮Press Button
底下一截同色实心阴影，按下时按钮沉进去，阴影跟着变短。
效果预览
适合用在哪
支付确认、游戏化产品、任何想让点击有「按下去了」手感的主操作。
容易踩的坑
- 用大而软的投影冒充厚度，按下时没有「键程」，看起来只是普通悬停。
- 再叠加磁吸位移，按下时按钮一边下沉一边跟着光标飘。
- :active 的位移超过阴影厚度，按钮像陷进页面里，松手后又弹得太高。
设计提示词 · Prompt
按压按钮（Press Button）：静止时 box-shadow:0 4px 0 比按钮底色深一档的纯色，像一枚有厚度的键。:hover 先下沉 1px、阴影收到 3px；:active 时 translateY(4px) 且阴影收到 0，过渡 120ms。阴影用同色实边，不要用大而软的投影冒充厚度。按钮高度 44-48px，圆角 10-12px。可以和涟漪共存，不要再叠加磁吸位移，否则按下时位置会飘。prefers-reduced-motion 时保留颜色，去掉位移动画。
Press Button: at rest, box-shadow:0 4px 0 in a solid color one step darker than the fill, like a key with thickness. On hover, sink 1px and shorten the shadow to 3px; on active, translateY(4px) and collapse the shadow to 0, over 120ms. Use a solid same-hue edge, not a large soft shadow pretending to be thickness. Height 44-48px, radius 10-12px. It can coexist with a ripple, but don't also add magnetic translation or the button drifts while being pressed. Under prefers-reduced-motion, keep the color and drop the movement.
常见搭配
同一页面里经常和「按压按钮」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s" style="display:flex;justify-content:center;padding:18px 0"> <button class="d-pressbtn" type="button">确认支付</button> </div>