Jelly Button

About Jelly Button is a playful, tactile, and customizable interactive button component for Framer.

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 .

Volumetric 3D Glass-Clay