Destello IA degradado

Destello IA degradado: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

sparkleaipillgradienticonanimated

CSS
.btn-176 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 14px/1 system-ui,sans-serif;
  color: #fff;
  background: linear-gradient(120deg,#7c3aed,#db2777,#7c3aed);
  background-size: 300% 100%;
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  cursor: pointer;
  box-shadow: 0 4px 14px -4px #db277788;
  animation: shift176 5s linear infinite;
  transition: transform .2s,box-shadow .2s
}
.btn-176 svg {
  animation: twinkle176 1.8s ease-in-out infinite
}
.btn-176:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px #db2777aa;
  animation-duration: 2s
}
.btn-176:focus-visible {
  outline: 2px solid #db2777;
  outline-offset: 3px
}
.btn-176:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px -2px #db277788
}
@keyframes shift176 {
  to {
    background-position: 300% 0
  }
}
@keyframes twinkle176 {
  50% {
    transform: scale(.8) rotate(20deg);
    opacity: .7
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-176, .btn-176 * { animation: none; transition: none; }
}
HTML
<button class="btn-176"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l1.8 6.2L20 10l-6.2 1.8L12 18l-1.8-6.2L4 10l6.2-1.8zM19 16l.9 2.1L22 19l-2.1.9L19 22l-.9-2.1L16 19l2.1-.9z"/></svg>Suggest</button>
Prompt

Un botón píldora de sugerencia: un degradado violeta y rosa (#7c3aed, #db2777) de movimiento lento al 300% de ancho en bucle cada 5 segundos, texto blanco 14px semibold "Suggest" con un icono inline de dos estrellas que parpadea (escala 0.8, bamboleo de 20 grados) cada 1.8s, padding 12px por 22px, sombra con brillo rosa. En hover se eleva 1px y acelera el degradado; active baja 1px. Focus con outline rosa de 2px.