# Fatia cônica em órbita (B 102)

Categoria: Botões  
Tags: gradient-border, animated, rounded, conic, property, hover-start  
Página: https://designforai.dev/pt/snippet/btn-102

## Prompt

Um botão branco com raio de 10px e borda de 2px cinza claro #e5e7eb, exceto por uma fatia escura #111827, feita com gradiente cônico. A fatia fica parada até o hover, e então orbita o botão uma vez a cada 1.2s usando um ângulo animado com @property. Texto #111827 de 14px semibold, padding de 13px por 24px. No active o interior ganha o tom #f3f4f6, o foco é um outline escuro de 2px com offset de 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; }
}
```