光影扫过按钮 · 按钮
前端Wiki/CSS 特效合集/光影扫过按钮

光影扫过按钮

悬停时一道斜光从左扫到右,低调而有质感

← 返回 按钮 类特效列表

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

CSS 代码

CSS
.fx .sheen{position:relative;display:block;width:180px;margin:40px auto;padding:13px 0;text-align:center;border-radius:10px;background:#222;color:#fff;font-size:15px;overflow:hidden;cursor:pointer;border:1px solid #333}
.fx .sheen::before{content:"";position:absolute;top:0;left:-60%;width:50%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg)}
.fx .sheen:hover::before{animation:kfx-sheen .7s ease}
@keyframes kfx-sheen{to{left:120%}}

HTML 结构

HTML
<div class="fx">
<button class="sheen">光影扫过</button>
</div>
实现要点:光影 = skew 渐变伪元素从左平移到右;overflow:hidden 是前提

其它按钮类特效

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