当前位置：首页 > CSS

css 发光按钮制作

2026-04-01 16:46:56CSS

基础发光按钮制作

使用CSS的box-shadow属性可以轻松实现按钮发光效果。以下是一个基础示例：

.glow-button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
  box-shadow: 0 0 10px #4CAF50;
  transition: box-shadow 0.3s ease;
}

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

悬停动画效果

为按钮添加悬停时的发光动画效果：

.glow-animate {
  background-color: #008CBA;
  box-shadow: 0 0 5px #008CBA;
  transition: all 0.3s ease;
}

.glow-animate:hover {
  box-shadow: 0 0 20px #008CBA;
  transform: scale(1.05);
}

多彩霓虹效果

创建类似霓虹灯的多彩发光按钮：

.neon-button {
  background-color: transparent;
  color: #fff;
  border: 2px solid #ff00ff;
  padding: 12px 30px;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  transition: all 0.3s;
  box-shadow: 0 0 10px #ff00ff, 
              0 0 20px rgba(255, 0, 255, 0.3);
}

.neon-button:hover {
  color: #fff;
  background-color: #ff00ff;
  box-shadow: 0 0 20px #ff00ff,
              0 0 40px rgba(255, 0, 255, 0.6);
}

脉冲发光效果

实现周期性脉冲发光效果：

.pulse-button {
  animation: pulse 2s infinite;
  background-color: #f44336;
  color: white;
  padding: 15px 32px;
  border: none;
  border-radius: 4px;
}

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

边框发光效果

仅让按钮边框发光：

css 发光按钮制作

.border-glow {
  background: #111;
  color: #fff;
  padding: 15px 40px;
  border: none;
  position: relative;
}

.border-glow::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #ff00ff, #00ffff);
  z-index: -1;
  border-radius: 4px;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.border-glow:hover::before {
  opacity: 1;
  box-shadow: 0 0 10px #ff00ff, 
              0 0 20px #00ffff;
}

这些CSS样式可以根据需要组合使用，调整颜色、大小和动画参数来创建各种发光按钮效果。实际应用时，建议根据项目设计风格选择合适的发光强度、颜色和动画效果。