# Conic wedge orbit (B 102)

Category: Buttons  
Tags: gradient-border, animated, rounded, conic, property, hover-start  
Page: https://designforai.dev/snippet/btn-102

## Prompt

A white 10px-radius button with a 2px border that is light grey #e5e7eb except for a dark #111827 wedge, made with a conic gradient. The wedge is static until hover, then it orbits the button once every 1.2s using an animated @property angle. Text #111827 14px semibold, 13px by 24px padding. Active tints the inside #f3f4f6, focus is a 2px dark outline offset 4px.

## HTML

```html
<button class="btn-102">Try it free</button>
```

## CSS

```css
@property --a102 {
  syntax: "<angle>";
  inherits: false;
  initial-value: 120deg
}
.btn-102 {
  position: relative;
  font: 600 14px/1 system-ui,sans-serif;
  color: #111827;
  background: #fff;
  border: 0;
  border-radius: 10px;
  padding: 13px 24px;
  cursor: pointer;
  isolation: isolate
}
.btn-102::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 12px;
  background: conic-gradient(from var(--a102),#e5e7eb 0 70%,#111827 100%);
  z-index: -1
}
.btn-102::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  z-index: -1
}
.btn-102:hover::before {
  animation: spin102 1.2s linear infinite
}
.btn-102:focus-visible {
  outline: 2px solid #111827;
  outline-offset: 4px
}
.btn-102:active::after {
  background: #f3f4f6
}
@keyframes spin102 {
  to {
    --a102: 480deg
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-102, .btn-102 * { animation: none; transition: none; }
}
```