Bubble Blob Button brings an organic, playful "gooey" liquid physics effect to your Framer call-to-action buttons. Using real-time SVG filters (feGaussianBlur + feColorMatrix) and springy CSS transitions, hover interactions cause animated liquid blobs to squish and separate dynamically from the main button body. Complete with top gloss highlights and squishy press feedback, it's an eye-catching interactive element for modern landing pages.
Dynamic SVG Goo Effect: Combines blur and color matrix threshold filters to blend animated blobs smoothly in real time.
Springy Squishy Interactions: Features custom cubic-bezier timing curves that deform the button on hover and squish inward on press/click.
Multi-Blob Customization: Render up to 5 customizable liquid blobs that expand outward on hover with staggered animation delays.
Glossy Highlight Overlay: Includes a realistic top gloss reflection layer to accentuate the 3D liquid aesthetic.
Canvas & SSR Safe: Detects static preview mode (useIsStaticRenderer) to bypass filters during canvas editing and server-side rendering for optimal performance.
Accessible & Link Ready: Supports semantic <a> or <button> rendering, focus-visible outlines, custom ARIA labels, and full keyboard navigation (Enter / Space).
All properties are adjustable directly from Framer's Property Panel:
Button Label & Link: Set primary text, link URL, target tab behavior, and custom ARIA labels.
Typography & Layout: Complete font controls (family, weight, style, size), custom radius, and fused padding settings.
Colors: Customize base button color, hover fill, text color, and individual blob shading.
Goo Physics: Tweak SVG Blur (stdDeviation), Goo Strength, and Cutoff Thresholds to craft your ideal liquid viscosity.
Blob Controls: Toggle between 1 to 5 blobs with full control over size, stagger delays, and directional X/Y offset trajectories.
Made with 💛 by @Karim Saif
Bubble Blob Button brings an organic, playful "gooey" liquid physics effect to your Framer call-to-action buttons. Using real-time SVG filters (feGaussianBlur + feColorMatrix) and springy CSS transitions, hover interactions cause animated liquid blobs to squish and separate dynamically from the main button body. Complete with top gloss highlights and squishy press feedback, it's an eye-catching interactive element for modern landing pages.
Dynamic SVG Goo Effect: Combines blur and color matrix threshold filters to blend animated blobs smoothly in real time.
Springy Squishy Interactions: Features custom cubic-bezier timing curves that deform the button on hover and squish inward on press/click.
Multi-Blob Customization: Render up to 5 customizable liquid blobs that expand outward on hover with staggered animation delays.
Glossy Highlight Overlay: Includes a realistic top gloss reflection layer to accentuate the 3D liquid aesthetic.
Canvas & SSR Safe: Detects static preview mode (useIsStaticRenderer) to bypass filters during canvas editing and server-side rendering for optimal performance.
Accessible & Link Ready: Supports semantic <a> or <button> rendering, focus-visible outlines, custom ARIA labels, and full keyboard navigation (Enter / Space).
All properties are adjustable directly from Framer's Property Panel:
Button Label & Link: Set primary text, link URL, target tab behavior, and custom ARIA labels.
Typography & Layout: Complete font controls (family, weight, style, size), custom radius, and fused padding settings.
Colors: Customize base button color, hover fill, text color, and individual blob shading.
Goo Physics: Tweak SVG Blur (stdDeviation), Goo Strength, and Cutoff Thresholds to craft your ideal liquid viscosity.
Blob Controls: Toggle between 1 to 5 blobs with full control over size, stagger delays, and directional X/Y offset trajectories.
Made with 💛 by @Karim Saif
