Design for AI

Pfeil eingleitend

Pfeil eingleitend: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

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

Ein dunkler #0f172a 15px semibold Textlink mit 26px reserviertem Platz rechts. Beim Hover gleitet ein Unicode-Pfeil nach rechts von links in diesen Platz und blendet dabei ein, während eine 2px Unterstreichung von links nach rechts unter den Wörtern wächst (Gradient background-size Trick), beides 250ms. Active färbt den Text blau. Focus: 2px dunkle Outline.

Gleiches Regal