Design for AI

Enlace con flecha

Enlace con flecha: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

link-stylearrowtextminimalslide

Read the guide
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

Un enlace de texto con estilo de CTA sin botón: texto azul #2563eb 15px semibold seguido de un icono inline de flecha derecha de 16px, gap 6px, sin fondo. En hover el gap crece a 12px y la flecha se desplaza 2px más a la derecha (200ms), color #1d4ed8. Active empuja la flecha 4px. Focus con outline azul de 2px y offset 3px.

Misma estantería