# Highlight sweep (B 105)

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

## Prompt

A slate #1e293b button, 12px radius, off-white #f8fafc 14px semibold text, 13px by 26px padding, with a 1.5px border that is #475569 except for a bright #f8fafc highlight wedge. The wedge sweeps around the edge (2.5s per loop) only while hovered, using animation-play-state paused/running on an @property angle. Active darkens the inside to #0f172a; focus 2px white outline offset 3px.

## HTML

```html
<button class="btn-105">Continue</button>
```

## CSS

```css
@property --a105 {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg
}
.btn-105 {
  position: relative;
  font: 600 14px/1 system-ui,sans-serif;
  letter-spacing: .02em;
  color: #f8fafc;
  background: #1e293b;
  border: 0;
  border-radius: 12px;
  padding: 13px 26px;
  cursor: pointer;
  isolation: isolate
}
.btn-105::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 13px;
  background: conic-gradient(from var(--a105),#475569 0 40%,#f8fafc 50%,#475569 60% 100%);
  z-index: -1;
  animation: sweep105 2.5s linear infinite;
  animation-play-state: paused
}
.btn-105::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #1e293b;
  z-index: -1
}
.btn-105:hover::before {
  animation-play-state: running
}
.btn-105:focus-visible {
  outline: 2px solid #f8fafc;
  outline-offset: 3px
}
.btn-105:active::after {
  background: #0f172a
}
@keyframes sweep105 {
  to {
    --a105: 360deg
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-105, .btn-105 * { animation: none; transition: none; }
}
```