Pfeil-Link gleitend

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

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

Ein Textlink als CTA ohne Button-Optik: blauer #2563eb 15px semibold Text, gefolgt von einem 16px Inline-Pfeil-nach-rechts-Icon, 6px Abstand, kein Hintergrund. Beim Hover weitet sich der Abstand auf 12px und der Pfeil rückt 2px weiter nach rechts (200ms), Farbe #1d4ed8. Active schiebt den Pfeil 4px. Focus: 2px blaue Outline mit 3px Offset.

Pfeil-Link gleitend

Gleiches Regal