css发光按钮制作

使用 box-shadow 实现发光效果

通过 box-shadow 属性为按钮添加外发光效果。调整模糊半径和颜色强度可控制发光范围。

.glow-button {
  box-shadow: 0 0 10px #00ffaa, 0 0 20px #00ffaa;
}

结合 text-shadow 增强文字发光

若按钮包含文字，可通过 text-shadow 让文字同步发光。

.glow-button {
  text-shadow: 0 0 5px #fff;
}

添加悬停动画效果

利用 transition 和 :hover 实现交互动态发光。

.glow-button {
  transition: box-shadow 0.3s ease;
}
.glow-button:hover {
  box-shadow: 0 0 15px #00ffaa, 0 0 30px #00ffaa;
}

使用 filter: drop-shadow() 替代方案

适合为不规则形状按钮添加发光，但性能略低于 box-shadow。

.glow-button {
  filter: drop-shadow(0 0 8px #00ffaa);
}

示例完整代码

整合以上属性实现动态发光按钮：

<button class="glow-button">点击我</button>

<style>
.glow-button {
  background: #222;
  color: #00ffaa;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 8px;
  box-shadow: 0 0 10px #00ffaa, 0 0 20px #00ffaa;
  text-shadow: 0 0 5px #fff;
  transition: box-shadow 0.3s ease;
}
.glow-button:hover {
  box-shadow: 0 0 15px #00ffaa, 0 0 30px #00ffaa;
}
</style>

调整参数优化效果

• 模糊半径：box-shadow 的第三个值越大，发光越柔和。
• 颜色透明度：使用 RGBA 或 HSLA 调整发光透明度（如 rgba(0, 255, 170, 0.7)）。
• 多层阴影：叠加多个 box-shadow 值可增强层次感。