Design for AI

Seta com linha longa

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

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

Um link editorial em caixa alta 14px (#1c1917, tracking 0.08em) com uma seta fina desenhada como uma linha de 28px mais ponta, usando clip-path em um pseudo-elemento. No hover a linha se estica até 52px em 300ms ease-out e o texto esquenta para #78350f; no active encurta para 36px. Focus com outline escuro de 2px e offset de 4px.

Mesma prateleira