# Sparkle orbit (B 178)

Category: Buttons  
Tags: sparkle, ai, pill, dark, animated, orbit  
Page: https://designforai.dev/snippet/btn-178

## Prompt

A dark violet #2e1065 AI pill with a 1px #6d28d9 border, pale #f5f3ff 14px semibold "Enhance" text and a 14px four-point star (clip-path polygon, #c4b5fd) that slowly spins. On hover the background lightens to #4c1d95 and three tiny white/lavender dots (one pseudo-element plus box-shadow copies) twinkle across the button. Active #1e0a3f. Focus 2px lavender outline.

## HTML

```html
<button class="btn-178"><i aria-hidden="true"></i>Enhance</button>
```

## CSS

```css
.btn-178 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 14px/1 system-ui,sans-serif;
  color: #f5f3ff;
  background: #2e1065;
  border: 1px solid #6d28d9;
  border-radius: 999px;
  padding: 11px 22px 11px 16px;
  cursor: pointer;
  overflow: hidden;
  transition: background .2s,border-color .2s
}
.btn-178 i {
  width: 14px;
  height: 14px;
  background: #c4b5fd;
  clip-path: polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation: spin178 3s linear infinite
}
.btn-178::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  top: 20%;
  left: 70%;
  box-shadow: -40px 14px 0 -1px #fff,20px 18px 0 -1px #c4b5fd;
  opacity: 0;
  transition: opacity .3s
}
.btn-178:hover {
  background: #4c1d95;
  border-color: #a78bfa
}
.btn-178:hover::after {
  opacity: 1;
  animation: tw178 1.2s ease-in-out infinite
}
.btn-178:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 3px
}
.btn-178:active {
  background: #1e0a3f
}
@keyframes spin178 {
  to {
    transform: rotate(360deg)
  }
}
@keyframes tw178 {
  50% {
    opacity: .3
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-178, .btn-178 * { animation: none; transition: none; }
}
```