Design for AI

Arrow swap in

Arrow swap in: a CSS button. Copy the rules, or the prompt that rebuilds it.

link-stylearrowtextrevealunderline

See pricing
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

A dark #0f172a 15px semibold text link with 26px of reserved space on the right. On hover a unicode right arrow slides in from the left into that space while fading in, and a 2px underline grows from left to right under the words (gradient background-size trick), both 250ms. Active turns the text blue. Focus 2px dark outline.

Same shelf