Bouton Flashy

<button class="glow-button">
  ⚡ Bouton Flashy
</button>

.glow-button {
  position: relative;
  padding: 18px 36px;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, #ff0080 0%, #ff6b35 25%, #feca57 50%, #48dbfb 75%, #ff0080 100%);
  background-size: 300% 300%;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 
    0 0 20px rgba(255, 0, 128, 0.5),
    0 0 40px rgba(255, 107, 53, 0.4),
    0 0 60px rgba(254, 202, 87, 0.3),
    0 0 80px rgba(72, 219, 251, 0.2),
    inset 0 0 20px rgba(255, 255, 255, 0.2);
  animation: gradientShift 3s ease infinite;
}

.glow-button::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #ff0080, #ff6b35, #feca57, #48dbfb, #ff0080, #ff6b35, #feca57, #48dbfb);
  background-size: 400% 400%;
  border-radius: 8px;
  z-index: -1;
  animation: borderGlow 2s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.glow-button:hover::before {
  opacity: 1;
}

.glow-button:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 
    0 0 30px rgba(255, 0, 128, 0.8),
    0 0 60px rgba(255, 107, 53, 0.6),
    0 0 90px rgba(254, 202, 87, 0.4),
    0 0 120px rgba(72, 219, 251, 0.3),
    0 15px 35px rgba(0, 0, 0, 0.3);
  animation: gradientShift 1s ease infinite, pulse 0.6s ease-in-out infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes borderGlow {
  0% { background-position: 0% 0%; }
  100% { background-position: 400% 0%; }
}

@keyframes pulse {
  0%, 100% { transform: translateY(-3px) scale(1.05); }
  50% { transform: translateY(-3px) scale(1.08); }
}