当前位置：首页 > CSS

css制作按钮光晕

2026-03-12 04:45:03CSS

使用 box-shadow 实现基础光晕效果

在CSS中，box-shadow属性是创建按钮光晕最直接的方法。通过调整阴影的模糊半径和扩散范围，可以模拟出柔和的光晕效果。

.glow-button {
  background-color: #4CAF50;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  box-shadow: 0 0 10px #4CAF50;
  transition: box-shadow 0.3s ease;
}

.glow-button:hover {
  box-shadow: 0 0 20px #4CAF50;
}

多层阴影增强立体感

叠加多层不同参数的box-shadow可以创建更丰富的视觉效果。每层阴影使用不同的模糊半径和透明度。

css制作按钮光晕

.multi-glow-button {
  background: linear-gradient(145deg, #6e8efb, #a777e3);
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  box-shadow: 
    0 0 5px rgba(167, 119, 227, 0.8),
    0 0 10px rgba(167, 119, 227, 0.6),
    0 0 15px rgba(167, 119, 227, 0.4);
  transition: all 0.3s ease;
}

.multi-glow-button:hover {
  box-shadow: 
    0 0 10px rgba(167, 119, 227, 0.8),
    0 0 20px rgba(167, 119, 227, 0.6),
    0 0 30px rgba(167, 119, 227, 0.4);
  transform: translateY(-2px);
}

使用 filter: drop-shadow 实现不规则形状光晕

对于非矩形按钮或带有透明区域的元素，filter: drop-shadow()比box-shadow更适合，因为它会跟随元素的轮廓。

css制作按钮光晕

.irregular-glow {
  width: 100px;
  height: 100px;
  background-color: #FF6B6B;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  filter: drop-shadow(0 0 8px #FF6B6B);
  transition: filter 0.3s ease;
}

.irregular-glow:hover {
  filter: drop-shadow(0 0 16px #FF6B6B);
}

动画光晕效果

通过CSS动画让光晕产生脉动效果，增加视觉吸引力。使用@keyframes定义动画序列。

.pulse-glow {
  background-color: #FFA500;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.7);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(255, 165, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 165, 0, 0);
  }
}

结合伪元素创建高级光晕

利用::before或::after伪元素可以制作更复杂的光晕效果，如环形扩散光晕。

.advanced-glow {
  position: relative;
  background-color: #9C27B0;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  overflow: hidden;
}

.advanced-glow::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(156, 39, 176, 0.8) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.advanced-glow:hover::after {
  opacity: 1;
}