按下时按钮回弹缩放,阴影同步收紧带来 Q 弹手感
← 返回 按钮 类特效列表上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果
.fx .push{display:block;width:200px;margin:50px auto;padding:14px 0;border:none;border-radius:12px;background:linear-gradient(135deg,#4a9eff,#a371f7);color:#fff;font-size:16px;cursor:pointer;box-shadow:0 8px 18px rgba(167,113,247,.4);transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease}
.fx .push:active{transform:scale(.95);box-shadow:0 3px 8px rgba(167,113,247,.4)}<div class="fx">
<button class="push">按一下</button>
</div>