css制作发光按钮

使用 box-shadow 属性制作发光效果

通过 box-shadow 设置多层阴影叠加，模拟发光效果。阴影颜色应与按钮主题色一致，适当调整模糊半径和扩散范围。

.glow-button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  box-shadow: 0 0 5px #4CAF50, 0 0 20px #4CAF50;
  transition: box-shadow 0.3s ease;
}
.glow-button:hover {
  box-shadow: 0 0 10px #4CAF50, 0 0 30px #4CAF50;
}

结合 text-shadow 实现文字发光

若按钮文字需同步发光效果，使用 text-shadow 属性，配合与背景相同的颜色值。

.glow-text-button {
  background-color: #2196F3;
  color: white;
  padding: 12px 24px;
  text-shadow: 0 0 8px rgba(33, 150, 243, 0.8);
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.6);
}

使用 CSS 动画增强动态发光

通过 @keyframes 创建脉冲动画，使发光效果更生动。

@keyframes pulse {
  0% { box-shadow: 0 0 5px #FF5722; }
  50% { box-shadow: 0 0 20px #FF5722; }
  100% { box-shadow: 0 0 5px #FF5722; }
}
.animated-glow-button {
  background-color: #FF5722;
  animation: pulse 2s infinite;
}

渐变背景与发光的结合

线性渐变背景搭配发光阴影，提升视觉层次感。

.gradient-glow-button {
  background: linear-gradient(45deg, #9C27B0, #E91E63);
  box-shadow: 0 0 15px rgba(156, 39, 176, 0.7);
  color: white;
  padding: 10px 25px;
}