Why not always use a straight wipe?

You can. The curve is for when the edge is part of the design.

How slow is too slow?

If the fill is still travelling when someone presses, it is too slow. Stay under about 350 milliseconds.

Will the curve break the corner radius?

It will if you paint outside the clip.

Curve fill button

A curve fill button paints the hover state with a curved edge that sweeps across the control. The button stays put. The press still has to do one job.

Buttons and controlsBuild difficulty: Mediumclip-path

Also called Liquid fill, Wave fill, Blob fill, Curved wipe.

Here it is working.

Enter from the left or the right. The wipe follows you.

For designers

This is the theatrical neighbour of Background fill button. Same job, fussier edge. The live Button page still owns the label, hierarchy, loading and the focus ring. Use the curve when the shape is part of the design. If you cannot say why the edge is curved, you wanted a straight wipe. Keep the sweep short. A 200 to 350 millisecond path is enough. Longer and people press through a half-filled control. The resting fill has to work for thumbs. One of these on a hero is a choice. A form footer of liquid buttons is a puddle.

Use this when

There is one obvious action on a spacious screen, and the curved edge is a real part of the look.
Hover is a real input, and the resting button already looks pressable.
The label stays readable as the curve crosses it.
Touch and keyboard can use the button with no sweep at all.

Reach for something else when

A straight wipe would do the same job. Use Background fill button.
The fill should grow from the pointer as a circle. Use Circle fill button.
The button itself should move. Use Magnetic button.
The question is still whether this should be a button. Start with the Button page.

How to build it

Start with a real button. Clip the fill with a path, or sit an SVG shape behind the label and clip that to the button radius. Animate the path, or move the shape across, until the control is covered. Keep the duration in the 200 to 350 millisecond range. 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 effect on touch. Keyboard focus should look like the live Button focus ring. On reduced motion, snap to the hover fill or skip the sweep.

Official GSAP

gsap.to on clip-path. An ellipse anchored outside one edge gives the curve, an inset would give a straight wipe.

const at = side === 'left' ? '-4% 50%' : '104% 50%';
gsap.fromTo(fill, { clipPath: `ellipse(0% 170% at ${at})` },
  { clipPath: `ellipse(150% 170% at ${at})`, duration: 0.45, ease: 'power2.out' });

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

Common questions

Why not always use a straight wipe?: You can. The curve is for when the edge is part of the design.
How slow is too slow?: If the fill is still travelling when someone presses, it is too slow. Stay under about 350 milliseconds.
What about mobile?: Nothing. There is no hover.
Will the curve break the corner radius?: It will if you paint outside the clip.
Should a toolbar use this?: No. Save it for one action.

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: Icon button