Código·BotõesGradiente

Botão Gradiente Animado

Botão com gradiente animado em loop, border e efeito shimmer moderno.

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.btn-gradient {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 2rem;
  border-radius: 0.75rem;
  background: linear-gradient(270deg, #7c3aed, #a855f7, #ec4899, #8b5cf6);
  background-size: 300% 300%;
  animation: gradient-shift 4s ease infinite;
  color: #fff;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-gradient:hover {
  opacity: 0.9;
}