- Seguidores
- 2.481
- Publicaciones
- 312
Follow button that changes width
Follow turns into Following as the plus spins into a check; hover again and it offers to unfollow in red.
Settings
Code
<div class="uvq15-flw"><span class="av" aria-hidden="true">MR</span><b class="nm">Martina Ríos</b><small class="rl">Illustrator in Bilbao</small><dl><div><dt>Followers</dt><dd class="n">2.481</dd></div><div><dt>Posts</dt><dd>312</dd></div></dl><button type="button" class="bt" aria-pressed="false"><span class="ic" aria-hidden="true"><i></i><i></i></span><span class="tx"><span class="vis">Follow</span><span>Following</span><span>Unfollow</span></span></button></div>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 Microinteractions
See all MicrointeractionsWhere to use it
Follow buttons change state often and their labels have very different lengths, so this one animates its own width instead of jumping. The plus sign rotates into a check, the label slides to Following, the follower count rolls by one and the avatar gets a small ring. Hovering a followed profile later turns the button red with Unfollow.
The main color is the filled button and the secondary one is the warning red for unfollowing. The hover state only appears after the pointer leaves once, so it never flashes right after a click. On touch screens the label simply stays as Following.