Pfeil lange Linie

Pfeil lange Linie: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

link-stylearrowlineeditorialexpand

CSS

.btn-174 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 500 14px/1 system-ui,sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #1c1917;
  text-decoration: none;
  padding: 6px 0;
  transition: color .2s
}
.btn-174::after {
  content: "";
  width: 28px;
  height: 1.5px;
  background: currentColor;
  clip-path: polygon(0 45%,calc(100% - 6px) 45%,calc(100% - 6px) 0,100% 50%,calc(100% - 6px) 100%,calc(100% - 6px) 55%,0 55%);
  transform: scaleY(6);
  transform-origin: center;
  transition: width .3s ease-out
}
.btn-174:hover::after {
  width: 52px
}
.btn-174:hover {
  color: #78350f
}
.btn-174:focus-visible {
  outline: 2px solid #1c1917;
  outline-offset: 4px
}
.btn-174:active::after {
  width: 36px
}

HTML

<a class="btn-174" href="#">Continue reading</a>

Prompt

Ein redaktioneller Versalien-Link 14px (#1c1917, 0.08em Laufweite) mit dünnem Pfeil, gezeichnet als 28px Linie plus Pfeilspitze per clip-path auf einem Pseudo-Element. Beim Hover streckt sich die Linie über 300ms ease-out auf 52px und der Text wird wärmer #78350f; Active verkürzt sie auf 36px. Focus: 2px dunkle Outline mit 4px Offset.

Pfeil lange Linie

Gleiches Regal