Button fill-slide

Solid button where a darker fill slides in from the left on hover, and the arrow nudges. Snappier than a plain opacity hover, and it survives on dark backgrounds. Nav's primary CTA.

by FWONanimation-hovervanilla

Get a site with blocks like this

Live preview

open in new tab ↗

<button class="a25" type="button">
  <span>Book a 30 min call</span>
  <span class="ar">&rarr;</span>
</button>

Block id: tim-25-button-fill-slidevanilla · drop-in

More animation-hover blocks

Animated gradient-border button

21st.dev

AI agent command panel with thinking state

linear

Hero video dialog with thumbnail

magicui

Meteor shower overlay

magicui

Want the whole site, not just the block?

We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.

Get my free 15-min audit Book a Discovery Call