HTML + CSSButtons
Circle to pill button
A round arrow badge next to the label grows until it wraps the whole button in color.
Settings
16px
1x
Code
<button class="uv-cpl"><span class="or"></span><span class="a"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span><span class="t">Let’s talk</span></button>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Buttons
See all ButtonsWhere to use it
Agency and portfolio sites love this pattern because it stays calm at rest, just a colored circle with an arrow beside a word, and turns into a full call to action the moment you show interest. The circle stretches with a soft spring, the arrow travels to the far end and the label shifts to sit centered in white.
It works best with one or two words such as Contact, Let's talk or See work. Keyboard focus triggers the same expansion, so tabbing through the page shows exactly which action is active.