About Ripplee Button

About

Ripple Button is a clean pill-shaped CTA button with a satisfying liquid hover interaction. On hover, a colored fill rises up from the bottom of the button like a ripple, replacing the plain label with a vibrant filled version. It feels smooth, physical, and intentional.

What it does

The button stacks two layers inside a clipped pill container. At rest, only the plain text label is visible on a transparent background. On hover, a colored pill slides up from below to fill the entire button, creating a liquid ripple-fill effect. The overflow clip keeps the transition clean and sharp.

What you can customize

Full control from the Framer panel: button text, ripple fill color, ripple color channels, border radius, and inner pill radius. No code needed — everything adjusts from the properties panel.

Great for (examples)

Use it anywhere you want a hover effect that feels fluid and alive:

* hero section CTAs

* SaaS and startup landing pages

* portfolio and personal brand sites

* product launch pages

* waitlist and signup buttons

* pricing section actions

* dark and colorful layouts

* Framer template previews

Share your build

If you ship something cool with it, post it on X and tag me @karimsaif0, or send it over. I would love to see what you create.