Arrow link slide

Arrow link slide: a CSS button. Copy the rules, or the prompt that rebuilds it.

link-stylearrowtextminimalslide

CSS

.btn-171 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 15px/1 system-ui,sans-serif;
  color: #2563eb;
  text-decoration: none;
  padding: 6px 2px;
  border-radius: 4px;
  transition: gap .2s,color .2s
}
.btn-171 svg {
  transition: transform .2s
}
.btn-171:hover {
  gap: 12px;
  color: #1d4ed8
}
.btn-171:hover svg {
  transform: translateX(2px)
}
.btn-171:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px
}
.btn-171:active {
  color: #1e40af
}
.btn-171:active svg {
  transform: translateX(4px)
}

HTML

<a class="btn-171" href="#">Read the guide<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>

Prompt

A text link styled as a button-less CTA: blue #2563eb 15px semibold text followed by a 16px inline arrow-right icon, 6px gap, no background. On hover the gap widens to 12px and the arrow nudges 2px further right (200ms), colour #1d4ed8. Active pushes the arrow 4px. Focus 2px blue outline offset 3px.

Arrow link slide

Same shelf