Design for AI

Flecha de línea larga

Flecha de línea larga: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

link-stylearrowlineeditorialexpand

Continue reading
CSS
.btn-174 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 500 14px/1 system-ui,sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #1c1917;
  text-decoration: none;
  padding: 6px 0;
  transition: color .2s
}
.btn-174::after {
  content: "";
  width: 28px;
  height: 1.5px;
  background: currentColor;
  clip-path: polygon(0 45%,calc(100% - 6px) 45%,calc(100% - 6px) 0,100% 50%,calc(100% - 6px) 100%,calc(100% - 6px) 55%,0 55%);
  transform: scaleY(6);
  transform-origin: center;
  transition: width .3s ease-out
}
.btn-174:hover::after {
  width: 52px
}
.btn-174:hover {
  color: #78350f
}
.btn-174:focus-visible {
  outline: 2px solid #1c1917;
  outline-offset: 4px
}
.btn-174:active::after {
  width: 36px
}
HTML
<a class="btn-174" href="#">Continue reading</a>
Prompt

Un enlace editorial en mayúsculas de 14px (#1c1917, tracking 0.08em) con una flecha fina dibujada como una línea de 28px más punta usando un clip-path en un pseudoelemento. En hover la línea se estira a 52px durante 300ms ease-out y el texto se calienta a #78350f; active la acorta a 36px. Focus con outline oscuro de 2px y offset 4px.

Misma estantería