Flecha que entra

Flecha que entra: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

link-stylearrowtextrevealunderline

CSS

.btn-172 {
  position: relative;
  display: inline-block;
  font: 600 15px/1 system-ui,sans-serif;
  color: #0f172a;
  text-decoration: none;
  padding: 6px 26px 6px 0;
  overflow: hidden;
  transition: color .2s
}
.btn-172::after {
  content: "\2192";
  position: absolute;
  right: 0;
  top: 6px;
  transform: translateX(-14px);
  opacity: 0;
  transition: transform .25s,opacity .25s
}
.btn-172 span {
  background: linear-gradient(#0f172a,#0f172a) 0 100%/0 2px no-repeat;
  transition: background-size .25s
}
.btn-172:hover::after {
  transform: translateX(0);
  opacity: 1
}
.btn-172:hover span {
  background-size: 100% 2px
}
.btn-172:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: 3px
}
.btn-172:active {
  color: #2563eb
}

HTML

<a class="btn-172" href="#"><span>See pricing</span></a>

Prompt

Un enlace de texto oscuro #0f172a 15px semibold con 26px de espacio reservado a la derecha. En hover una flecha derecha unicode entra deslizándose desde la izquierda en ese espacio mientras aparece, y un subrayado de 2px crece de izquierda a derecha bajo las palabras (truco de background-size con degradado), ambos en 250ms. En active el texto pasa a azul. Focus con outline oscuro de 2px.

Flecha que entra

Misma estantería