Código·Botões›Gradiente
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;
}