Arrow circle grow

Arrow circle grow: a CSS button. Copy the rules, or the prompt that rebuilds it.

link-stylearrowicon-circletextexpand

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

A 16px semibold #111827 text link followed by a 32px outlined circle (1.5px border) holding a small diagonal arrow icon. On hover the circle fills dark with a white icon and rotates 45 degrees so the arrow points straight right, scaling 1.1, 250ms. Active settles the scale. Focus 2px dark outline.

Arrow circle grow

Same shelf