Gestrichelter Marsch

Gestrichelter Marsch: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

gradient-border animatedrectangleconicdashed

CSS

@property --a104 {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg
}
.btn-104 {
  position: relative;
  font: 500 14px/1 system-ui,sans-serif;
  color: #1e3a8a;
  background: #eff6ff;
  border: 0;
  border-radius: 8px;
  padding: 13px 22px;
  cursor: pointer;
  isolation: isolate
}
.btn-104::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  background: repeating-conic-gradient(from var(--a104),#3b82f6 0 12deg,transparent 12deg 24deg);
  z-index: -1;
  animation: march104 6s linear infinite
}
.btn-104::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #eff6ff;
  z-index: -1
}
.btn-104:hover::after {
  background: #dbeafe
}
.btn-104:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 4px
}
.btn-104:active::after {
  background: #bfdbfe
}
@keyframes march104 {
  to {
    --a104: 360deg
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-104, .btn-104 * { animation: none; transition: none; }
}

HTML

<button class="btn-104">Import file</button>

Prompt

Ein blassblauer #eff6ff Button mit 2px gestricheltem Rahmen aus einem repeating conic gradient (12 Grad blaue #3b82f6 Segmente, 12 Grad Lücken), der langsam rotiert, sodass die Striche in 6 Sekunden um die Kante marschieren. 8px Radius, #1e3a8a 14px medium Text, 13px mal 22px Padding. Hover #dbeafe, active #bfdbfe, Fokus 2px blaue Outline mit 4px Offset.

Gestrichelter Marsch

Gleiches Regal