# Flecha en círculo (B 173)

Categoría: Botones  
Etiquetas: link-style, arrow, icon-circle, text, expand  
Página: https://designforai.dev/es/snippet/btn-173

## 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.

## HTML

```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>
```

## CSS

```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)
}
```