Seta que entra

Seta que entra: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Um link de texto escuro #0f172a 15px semibold com 26px de espaço reservado à direita. No hover uma seta para a direita em unicode desliza da esquerda para esse espaço enquanto aparece em fade, e um sublinhado de 2px cresce da esquerda para a direita sob as palavras (truque de background-size com gradiente), ambos em 250ms. No active o texto fica azul. Focus com outline escuro de 2px.

Seta que entra

Mesma prateleira