# Destello IA outline (B 177)

Categoría: Botones  
Etiquetas: sparkle, ai, rounded, outline, gradient-border, icon  
Página: https://designforai.dev/es/snippet/btn-177

## Prompt

Un botón IA con contorno cuyo borde de 2px y texto comparten el mismo degradado violeta, rosa y naranja (#8b5cf6, #ec4899, #f97316): el borde mediante el truco de doble fondo padding-box/border-box con borde transparente, la etiqueta mediante background-clip text, y un icono inline de destello en rosa. Radio 10px, interior blanco, padding 11px por 20px, 14px semibold. En hover añade una sombra rosa suave y se eleva 1px. Focus con outline rosa de 2px.

## HTML

```html
<button class="btn-177"><span><svg width="15" height="15" 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.8z"/></svg>Generate</span></button>
```

## CSS

```css
.btn-177 {
  font: 600 14px/1 system-ui,sans-serif;
  background: linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#8b5cf6,#ec4899,#f97316) border-box;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 0;
  cursor: pointer;
  transition: box-shadow .2s,transform .2s
}
.btn-177 span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 20px;
  background: linear-gradient(120deg,#8b5cf6,#ec4899,#f97316);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}
.btn-177 svg {
  color: #ec4899
}
.btn-177:hover {
  box-shadow: 0 6px 18px -6px #ec489988;
  transform: translateY(-1px)
}
.btn-177:focus-visible {
  outline: 2px solid #ec4899;
  outline-offset: 3px
}
.btn-177:active {
  transform: translateY(0);
  box-shadow: none
}
```