Pfeilkreis wachsend

Pfeilkreis wachsend: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

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

Ein 16px semibold #111827 Textlink, gefolgt von einem 32px umrandeten Kreis (1.5px Rahmen) mit kleinem diagonalem Pfeil-Icon. Beim Hover füllt sich der Kreis dunkel mit weißem Icon und dreht sich um 45 Grad, sodass der Pfeil gerade nach rechts zeigt, Skalierung 1.1, 250ms. Active setzt die Skalierung zurück. Focus: 2px dunkle Outline.

Pfeilkreis wachsend

Gleiches Regal