悬停时按钮上浮加深阴影,点击有按压反馈
← 返回 按钮 类特效列表上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果
.fx .btn{padding:12px 32px;border:none;border-radius:10px;background:#4a9eff;color:#fff;font-size:15px;cursor:pointer;box-shadow:0 3px 10px rgba(74,158,255,.35);transition:transform .25s,box-shadow .25s}
.fx .btn:hover{transform:translateY(-6px);box-shadow:0 14px 28px rgba(74,158,255,.45)}
.fx .btn:active{transform:translateY(-2px)}
.fx .wp{text-align:center;padding:36px 0}<div class="fx">
<div class="wp"><button class="btn">悬停我看看</button></div>
</div>