Animated Gradient Button

.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: center;
  padding: 30px 0;
}

.gradient-button {
  position: relative;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 1;
}

.gradient-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: 200% 200%;
  background-position: 0% 0%;
  transition: background-position 0.6s ease;
  z-index: -1;
}

.gradient-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.gradient-button:hover::before {
  background-position: 100% 100%;
}

.gradient-button:active {
  transform: translateY(-1px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

/* Primary Button */
.gradient-button.primary::before {
  background: linear-gradient(45deg, #4776E6, #8E54E9, #4776E6);
}

/* Secondary Button */
.gradient-button.secondary::before {
  background: linear-gradient(45deg, #606c88, #3f4c6b, #606c88);
}

/* Success Button */
.gradient-button.success::before {
  background: linear-gradient(45deg, #11998e, #38ef7d, #11998e);
}

/* Danger Button */
.gradient-button.danger::before {
  background: linear-gradient(45deg, #f5576c, #f093fb, #f5576c);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .button-container {
    flex-direction: column;
    gap: 15px;
  }
  
  .gradient-button {
    width: 200px;
    padding: 10px 20px;
    font-size: 14px;
  }
}

document.addEventListener('DOMContentLoaded', function() {
  const buttons = document.querySelectorAll('.gradient-button');
  
  buttons.forEach(button => {
    // Add ripple effect on click
    button.addEventListener('click', function(e) {
      const x = e.clientX - e.target.getBoundingClientRect().left;
      const y = e.clientY - e.target.getBoundingClientRect().top;
      
      const ripple = document.createElement('span');
      ripple.classList.add('ripple-effect');
      ripple.style.left = `${x}px`;
      ripple.style.top = `${y}px`;
      
      this.appendChild(ripple);
      
      setTimeout(() => {
        ripple.remove();
      }, 600);
    });
    
    // Add hover animation
    button.addEventListener('mouseenter', function() {
      this.style.animation = 'pulse 1s infinite';
    });
    
    button.addEventListener('mouseleave', function() {
      this.style.animation = 'none';
    });
  });
  
  // Add CSS for ripple effect and pulse animation
  const style = document.createElement('style');
  style.textContent = `
    @keyframes pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
      }
      70% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
      }
    }
    
    .ripple-effect {
      position: absolute;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.4);
      width: 100px;
      height: 100px;
      margin-top: -50px;
      margin-left: -50px;
      animation: ripple 0.6s linear;
      transform: scale(0);
      opacity: 1;
      pointer-events: none;
    }
    
    @keyframes ripple {
      to {
        transform: scale(3);
        opacity: 0;
      }
    }
  `;
  document.head.appendChild(style);
});