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.
Need help?
Questions or feedback? Reach me anytime: karimsaif010@gmail.com or on X @karimsaif0.
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.
Need help?
Questions or feedback? Reach me anytime: karimsaif010@gmail.com or on X @karimsaif0.
