CSS 按钮悬停特效合集（发光/流光/磁吸 8 款源码）

效果演示（真实可交互）

完整代码（8 款通用结构）

所有按钮共用以下 HTML 结构，样式按需取用：

<button class="btn b-glow">发光</button>
<button class="btn b-sheen">流光</button>
<!-- ... 把类名换成下面任意一款即可 -->

.btn {
  padding: 12px 28px; border-radius: 8px; border: none;
  font-size: 15px; cursor: pointer; position: relative;
  background: #232a3d; color: #e8e8e8; transition: all .25s ease;
}

/* 1 发光：hover 时加外发光 */
.b-glow:hover { box-shadow: 0 0 20px rgba(108,140,255,.6); }

/* 2 流光：伪元素从左扫到右 */
.b-sheen { overflow: hidden; }
.b-sheen::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transition: left .5s ease;
}
.b-sheen:hover::after { left: 120%; }

/* 3 霓虹：描边变填充 + 辉光 */
.b-neon { border: 1px solid #b388ff; color: #b388ff; background: transparent; }
.b-neon:hover { background: #b388ff; color: #0f1117; box-shadow: 0 0 24px rgba(179,136,255,.7); }

/* 4 3D 按压：实心阴影，按下时下沉 */
.b-3d { box-shadow: 0 4px 0 #11152a; }
.b-3d:active { transform: translateY(4px); box-shadow: 0 0 0 #11152a; }

/* 5 渐变流动：背景放大循环移动 */
.b-grad { background: linear-gradient(90deg, #6c8cff, #b388ff, #6c8cff); background-size: 200%; }
.b-grad:hover { animation: bgmove 1.5s linear infinite; }
@keyframes bgmove { to { background-position: 200% 0; } }

/* 6 描边填充 */
.b-outline { border: 1px solid #6c8cff; color: #6c8cff; background: transparent; }
.b-outline:hover { background: #6c8cff; color: #fff; }

/* 7 下划线生长 */
.b-underline { background: transparent; }
.b-underline::after {
  content: ''; position: absolute; left: 50%; bottom: 6px; width: 0; height: 2px;
  background: #6c8cff; transition: all .3s ease; transform: translateX(-50%);
}
.b-underline:hover::after { width: 70%; }

/* 8 滑入填充 */
.b-slide { overflow: hidden; z-index: 1; }
.b-slide::before {
  content: ''; position: absolute; inset: 0; background: #6c8cff;
  transform: translateX(-100%); transition: transform .3s ease; z-index: -1;
}
.b-slide:hover { color: #fff; }
.b-slide:hover::before { transform: translateX(0); }

参数调节

兼容性与性能

• 全部纯 CSS + 伪元素，零 JS 零依赖，兼容现代浏览器
• 动画只动 transform/box-shadow，性能良好
• 注意：.b-sheen 和 .b-slide 需要 overflow: hidden，按钮内不要放需要溢出的内容

常见问题

Q: 能直接用在 React/Vue 里吗？ 可以，样式是纯 CSS，直接引入即可，类名不冲突就行。

Q: 怎么统一改颜色？ 全局搜 #6c8cff（主色）和 #b388ff（辅色）替换成你的主题色。

Q: 移动端有效果吗？ hover 在触屏上表现为首次点击触发，建议移动端以 :active 效果为主。

Q: 可以商用吗？ 可以，本组件为粤喵自研原创，免费商用无需署名。