Ripplee Button

ripples up from below on hover.

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 .

ripples up from below on hover.