按钮光泽扫过 4 种特效（斜向扫光/双向扫光/镜面高光 CSS 源码）

效果演示（真实可交互）

把鼠标移到按钮上，观察光泽扫过的方式差异。所有效果都由 ::before / ::after 伪元素完成，不需要改动 HTML 结构，直接复制 CSS 即可使用。

完整代码

HTML 结构：按钮就是一个普通的 <button class="sh-btn sh-sweep">，光泽层全部由伪元素承担：

<button class="sh-btn sh-sweep">单道扫过</button>
<button class="sh-btn sh-dual">双向扫过</button>
<button class="sh-btn sh-mirror">镜面高光</button>
<button class="sh-btn sh-glow">光晕扫过</button>

核心 CSS（以单道扫过为例）：

.sh-sweep {
  position: relative;
  overflow: hidden;   /* 关键：把光带裁在按钮内部 */
}
.sh-sweep::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);   /* 斜切出"扫过"的角度 */
  transition: left .55s ease;
}
.sh-sweep:hover::after { left: 130%; }   /* 从左侧滑到右侧外 */

/* 双向扫过：before/after 分别从左右相向而行 */
.sh-dual::before { left: -60%; }
.sh-dual::after  { right: -60%; }
.sh-dual:hover::before { left: 130%; }
.sh-dual:hover::after  { right: 130%; }

/* 圆点光晕：圆形渐变当作"光球"滚过按钮 */
.sh-glow::after {
  position: absolute;
  top: 50%; left: -60px;
  width: 60px; height: 60px; margin-top: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.75), transparent 70%);
  transition: left .6s cubic-bezier(.22, .61, .36, 1);
}
.sh-glow:hover::after { left: calc(100% + 10px); }

参数说明

兼容性与性能

• 纯 CSS 实现，现代浏览器全部支持；radial-gradient 需要 Chrome 31+ / Safari 6.1+，无兼容问题
• 动画只改 left 属性，虽然 left 会触发布局，但按钮数量少、区域小，开销可忽略
• 追求极致性能可把光带改造成 transform: translateX() 驱动，避免布局计算
• 大量按钮同屏时建议统一时长，避免光带节奏杂乱影响观感

常见问题

Q: 为什么我的光带直接盖住了文字？ 给 .sh-btn 的文本包一层 <span style="position: relative; z-index: 1">，或把伪元素设成 pointer-events: none，再检查伪元素 z-index 是否高于文字。

Q: 扫光方向想从右上到左下？ 把 skewX 改成正值 20deg，并把 left 的起始/终点方向对调（起点 left: 130%，hover 后 left: -80%）即可。

Q: 想要循环自动扫光，不需要 hover？ 把 transition 换成 animation：animation: sweep 2.5s ease-in-out infinite; 并在 keyframes 里定义 left 从 -80% 到 130%。

Q: 透明背景的幽灵按钮能加扫光吗？ 可以，把渐变光带透明度调低（如 .35），并将光带颜色从白色换成品牌色或互补色，效果同样出彩。