悬停上浮按钮 · 按钮
前端Wiki/CSS 特效合集/悬停上浮按钮

悬停上浮按钮

悬停时按钮上浮加深阴影,点击有按压反馈

← 返回 按钮 类特效列表

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

CSS 代码

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}

HTML 结构

HTML
<div class="fx">
<div class="wp"><button class="btn">悬停我看看</button></div>
</div>
实现要点:上浮 = translateY 上移 + 阴影扩散;:active 加按压感

其它按钮类特效

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