# Sparkle AI outline (B 177)

Category: Buttons  
Tags: sparkle, ai, rounded, outline, gradient-border, icon  
Page: https://designforai.dev/snippet/btn-177

## Prompt

An outlined AI button whose 2px border and text are both the same violet-pink-orange gradient (#8b5cf6, #ec4899, #f97316): the border via a double-background padding-box/border-box trick with a transparent border, the label via background-clip text, and a pink inline sparkle icon. 10px radius, white interior, 11px by 20px padding, 14px semibold. Hover adds a soft pink shadow and lifts 1px. Focus 2px pink outline.

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