Conic Keil-Orbit

Conic Keil-Orbit: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

gradient-border animatedroundedconicpropertyhover-start

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; }
}

HTML

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

Prompt

Ein weißer Button mit 10px Radius und 2px Rahmen, der hellgrau #e5e7eb ist bis auf einen dunklen #111827 Keil, gemacht mit einem Conic-Verlauf. Der Keil steht still bis zum Hover, dann umkreist er den Button alle 1.2s über einen animierten @property Winkel. Text #111827 14px semibold, 13px mal 24px Padding. Active tönt das Innere #f3f4f6, Fokus ist eine 2px dunkle Outline mit 4px Offset.

Conic Keil-Orbit

Gleiches Regal