Design for AI

Highlight sweep

Highlight sweep: a CSS button. Copy the rules, or the prompt that rebuilds it.

gradient-borderanimatedroundedconicmonochromeproperty

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; }
}
HTML
<button class="btn-105">Continue</button>
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.

Same shelf