# Brilho IA gradiente (B 176)

Categoria: Botões  
Tags: sparkle, ai, pill, gradient, icon, animated  
Página: https://designforai.dev/pt/snippet/btn-176

## Prompt

Um botão pílula de sugestão: um gradiente violeta-rosa (#7c3aed, #db2777) em movimento lento com 300% de largura em loop a cada 5 segundos, texto branco 14px semibold "Suggest" com um ícone inline de duas estrelas que cintila (escala 0.8, balanço de 20 graus) a cada 1.8s, padding 12px por 22px, sombra com brilho rosa. No hover sobe 1px e acelera o gradiente; no active desce 1px. Focus com outline rosa de 2px.

## HTML

```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>
```

## CSS

```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; }
}
```