Design for AI

Flecha en círculo

Flecha en círculo: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

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

Un enlace de texto #111827 16px semibold seguido de un círculo con contorno de 32px (borde 1.5px) que contiene un pequeño icono de flecha diagonal. En hover el círculo se rellena de oscuro con el icono en blanco y rota 45 grados para que la flecha apunte recto a la derecha, escalando 1.1, 250ms. Active asienta la escala. Focus con outline oscuro de 2px.

Misma estantería