Design for AI

Seta em círculo

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

link-stylearrowicon-circletextexpand

Our work
CSS
.btn-173 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 16px/1 system-ui,sans-serif;
  color: #111827;
  text-decoration: none;
  padding: 4px;
  border-radius: 999px;
  transition: color .2s
}
.btn-173 i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #111827;
  border: 1.5px solid #111827;
  border-radius: 50%;
  transition: background .25s,color .25s,transform .25s
}
.btn-173:hover i {
  background: #111827;
  color: #fff;
  transform: rotate(45deg) scale(1.1)
}
.btn-173:focus-visible {
  outline: 2px solid #111827;
  outline-offset: 2px
}
.btn-173:active i {
  transform: rotate(45deg) scale(1)
}
HTML
<a class="btn-173" href="#">Our work<i aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7M8 7h9v9"/></svg></i></a>
Prompt

Um link de texto 16px semibold #111827 seguido de um círculo contornado de 32px (borda de 1.5px) com um pequeno ícone de seta diagonal. No hover o círculo preenche escuro com ícone branco e rotaciona 45 graus para a seta apontar direto para a direita, em escala 1.1, 250ms. No active a escala volta ao normal. Focus com outline escuro de 2px.

Mesma prateleira