Arrow long line

Arrow long line: a CSS button. Copy the rules, or the prompt that rebuilds it.

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

An editorial uppercase 14px link (#1c1917, 0.08em tracking) with a thin arrow drawn as a 28px line plus arrowhead using a clip-path on a pseudo-element. On hover the line stretches to 52px over 300ms ease-out and the text warms to #78350f; active shortens it to 36px. Focus 2px dark outline offset 4px.

Arrow long line

Same shelf