按钮按压效果 · 按钮
前端Wiki/CSS 特效合集/按钮按压效果

按钮按压效果

按下时按钮回弹缩放,阴影同步收紧带来 Q 弹手感

← 返回 按钮 类特效列表

上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果

CSS 代码

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)}

HTML 结构

HTML
<div class="fx">
<button class="push">按一下</button>
</div>
实现要点:按压 = :active 缩放 + 阴影收紧;过冲缓动带来 Q 弹手感

其它按钮类特效

回到 前端Wiki 首页 · CSS 特效合集