Nothing. There is no hover. The resting fill is the design.

Can the fill follow the pointer?

That is [Circle fill button](/motion/circle-fill-button/).

Will the label vanish halfway through?

It will if you only swap colour at the end. Change the type as the fill crosses it, or choose fills that both work with one colour.

Background fill button

A background fill button keeps the control still and changes the fill on hover, usually from one edge, so the press lands where people aimed.

Buttons and controlsBuild difficulty: EasyyPercent

Also called Fill hover, Wipe button, Colour fill button, Hover wipe.

Here it is working.

Hover the pill. Ink rises from the bottom.

For designers

You reach for this on one spacious action. The live Button page still owns the label, hierarchy, loading and the focus ring. The wipe sits on top, and it only exists for a pointer. Thumbs get the resting fill, so that state has to work on its own. A wipe from the left or the bottom is enough. Once the fill chases the pointer, you wanted Circle fill button. Keep the label readable against both fills, including the frames in between. One of these on a hero is fine. A row of them is a row of weather systems.

Use this when

There is one obvious action and a louder hover would help, without moving the target.
Hover is a real input, and the resting fill already looks pressable.
The label stays readable against both fills.
Touch and keyboard can use the button with no wipe at all.

Reach for something else when

The question is whether this should be a button at all. Start with the Button page.
The fill should grow as a circle from the pointer. Use Circle fill button.
The fill should sweep on a curve. Use Curve fill button.
The button itself should move. Use Magnetic button.

How to build it

Start with a real button. Put a child behind the label and clip it to the button radius. Animate scaleX or scaleY from 0 to 1, origin on one edge. A 150 to 250 millisecond ease is plenty. Prefer scale over width, so neighbours do not jump. Leave the hit target where it was. Swap the label colour as the fill covers it, or pick two fills that both clear 4.5:1. Ignore the wipe on touch. Keyboard focus should look like the live Button focus ring. On reduced motion, snap to the hover fill or skip the tween.

Official GSAP

gsap.to yPercent.

gsap.set(fill, { yPercent: 100 });
gsap.to(fill, { yPercent: 0, duration: 0.35, ease: 'power2.out' });

Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.

Common questions

Does this replace the live Button page?: No. This page is the wipe.
How long should the fill take?: 150 to 250 milliseconds.
What about mobile?: Nothing. There is no hover. The resting fill is the design.
Can the fill follow the pointer?: That is Circle fill button.
Will the label vanish halfway through?: It will if you only swap colour at the end. Change the type as the fill crosses it, or choose fills that both work with one colour.

Save as skill

A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.

Use this with your AI

Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.

Last reviewed 26 AUG 2026

Next: Circle fill button