Animated Gradient Button

.gradient-button {
  padding: 12px 32px;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  background: linear-gradient(90deg, #4158d0, #c850c0, #ffcc70);
  background-size: 200% 200%;
  transition: all 0.5s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.gradient-button:hover {
  animation: gradient-shift 1s ease infinite;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}