当前位置：首页 > CSS

css制作按钮光晕

2026-04-02 00:49:09CSS

使用 `box-shadow` 创建基础光晕效果

为按钮添加多层 box-shadow 模拟光晕扩散效果。通过调整模糊半径和颜色透明度实现柔和的光晕过渡。

.button {
  box-shadow: 
    0 0 5px rgba(0, 255, 255, 0.5),
    0 0 10px rgba(0, 255, 255, 0.3),
    0 0 15px rgba(0, 255, 255, 0.1);
}

结合伪元素增强光晕层次

通过 ::before 或 ::after 伪元素创建更大的光晕层，配合 opacity 和 transform 实现动态效果。

.button::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: rgba(0, 255, 255, 0.1);
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s;
}
.button:hover::after {
  opacity: 1;
}

添加动画实现呼吸效果

使用 @keyframes 让光晕动态变化，模拟呼吸或脉冲效果。调整 animation 属性控制速度和循环方式。

@keyframes glow {
  0% { box-shadow: 0 0 5px cyan; }
  50% { box-shadow: 0 0 20px cyan; }
  100% { box-shadow: 0 0 5px cyan; }
}
.button {
  animation: glow 2s infinite;
}

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

若需对非矩形按钮（如SVG图标）添加光晕，drop-shadow 滤镜能更好地适配形状。

.icon-button {
  filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.6));
}

响应交互的渐变光晕

通过 CSS 变量和 JavaScript 动态改变光晕颜色或大小，实现点击或悬停时的实时反馈。

css制作按钮光晕

.button {
  --glow-color: rgba(0, 255, 255, 0.5);
  box-shadow: 0 0 10px var(--glow-color);
  transition: box-shadow 0.2s;
}
.button:hover {
  --glow-color: rgba(0, 200, 255, 0.8);
}