Link com seta deslizante

Link com seta deslizante: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Um link de texto estilizado como CTA sem botão: texto azul #2563eb 15px semibold seguido de um ícone de seta para a direita inline de 16px, gap de 6px, sem fundo. No hover o gap aumenta para 12px e a seta avança mais 2px para a direita (200ms), cor #1d4ed8. No active empurra a seta 4px. Focus com outline azul de 2px e offset de 3px.

Link com seta deslizante

Mesma prateleira