About Jelly Button
About
Jelly Button is a playful, tactile, and customizable interactive button component for Framer. Designed to add delight and visual polish to any interface, it combines a realistic 3D volumetric glass-clay look—complete with dual-curved light glare highlights and multi-layered inner shadows—with a physics-inspired keyframe wobble on hover.
Whether built as a main hero Call-to-Action, a floating conversion element, or an interactive UI accent, Jelly Button offers modern web physics and rich aesthetic controls directly within Framer.
What it does
Volumetric 3D Glass-Clay Styling: Blends top rim highlights, bottom inset depth shadows, and realistic curved glare reflections to give buttons a tangible, squishy appearance.
Organic Jello Wobble Physics: Triggers a multi-stage 3D squish keyframe animation sequence on hover that organically stretches and compresses based on your configured scale parameters.
Dual Curvatures Glare Highlights: Features pseudo-element top and bottom light glares with customizable translucency for an authentic glossy sheen.
What you can customize
Everything is fully configurable directly from Framer’s right-hand property panel:
Text & Typography: Full control over label text, custom aria-labels, font family, font size, line-height, letter-spacing, and font weight.
Box Model & Layout: Adjustable vertical/horizontal padding, border radius, optional border width, border color, and disabled state toggles.
Colors & Shadow Depth: Fine-tune base button color, top inset highlight color, bottom depth shadow color, inner shadow blur radius, and outer drop-shadow blur distance.
Glare Intensity: Precise control over top and bottom rim glare translucency.
Animation & Motion Physics: Customize maximum hover scale bounds, press/click scale compression ratios, and jello animation speed duration.
Need help?
Have questions or feedback? Reach out anytime at karimsaif010@gmail.com or on X @karimsaif0.
