伪类选择器必须用:hover实现镜面反光效果，因其能触发即时重绘且无需JS干预；:active仅瞬时生效，类名方式需手动管理状态易出错。
伪类选择器必须用 :hover，不能写成 .hover 或 :active
很多人一上来就给按钮加 .shine 类，再用 JS 切换——这完全绕开了伪类本意，也失去了 CSS 原生响应的优势。镜面反光本质是视觉层叠+渐变位移，:hover 是唯一能触发即时重绘且无需 JS 干预的伪类。用 :active 会只在点击瞬间生效，用户还没看清反光就消失了；写成类名则必须手动管理状态，容易漏掉鼠标移出逻辑。
正确写法就是直接在按钮的 :hover 规则里定义反光层：
button {
position: relative;
overflow: hidden;
}
button::before {
content: '';
position: absolute;
top: -50%;
left: -60%;
width: 200%;
height: 200%;
background: linear-gradient(
to right,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.8) 50%,
rgba(255,255,255,0) 100%
);
transform: rotate(25deg);
pointer-events: none;
}
button:hover::before {
left: 120%;
}
::before 必须设 pointer-events: none
不加这句，伪元素会盖在按钮上拦截鼠标事件，导致 :hover 状态无法维持——鼠标一挪到反光区域，立刻触发 :hover 退出，反光闪一下就消失。这是最常被忽略的兼容性细节，尤其在移动端或触控设备上更明显。
另外几个关键点：
立即学习“前端免费学习笔记（深入）”；
-
position: relative在按钮上是必须的，否则::before会相对于 body 定位，跑偏 -
overflow: hidden防止反光条溢出按钮边界，不然会看到奇怪的拉伸残影 -
transform: rotate()角度建议控制在 20–30 度之间，太小像没动，太大显得失真
反光动画要用 transition 控制 left，别动 transform
如果对 transform 加 transition，旋转+位移混合会导致反光轨迹歪斜、加速不均，看起来像“甩出去”。而只过渡 left 值，能让高光平滑扫过表面，符合真实镜面反射的线性感。
推荐写法：
button::before {
transition: left 0.5s ease-out;
}
button:hover::before {
left: 120%;
}
注意：ease-out 比 linear 更自然，因为反光扫过时速度应逐渐放缓；0.5s 是实测较舒服的时长，太快像闪，太慢像卡顿。
深色背景按钮要调低 rgba 的 alpha 值
在黑色或深灰背景上，保持 rgba(255,255,255,0.8) 会显得刺眼、塑料感强。实际项目中建议降到 0.4–0.6，并把渐变中间点（50%）往 40–45% 微调，让高光更窄、更聚焦。
例如深色主题下的优化版本：
background: linear-gradient( to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 42%, rgba(255,255,255,0) 100% );
不同背景色下，这个值需要肉眼调试——没有万能参数，靠预览+微调。
镜面反光不是加个渐变就完事，核心在于高光移动路径是否可信、过渡节奏是否匹配人眼预期，以及是否真正贴合按钮的视觉层级。很多实现失败，是因为把反光当装饰，而不是表面材质的一部分。
