---
title: "Jelly Button — Free Framer component · Best of Framer"
description: "Free Framer component · by Karim Saif · Buttons. About Jelly Button is a playful, tactile, and customizable interactive button component for Framer."
canonical: "https://framer.elliotli.dev/component/jelly-button"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Jelly Button

# Jelly Button

Volumetric 3D Glass-Clay

[View on Framer](https://framer.com/marketplace/components/jelly-button/?via=elliot-li)

![Jelly Button preview image 1](https://framer.elliotli.dev/og/component/jelly-button/458f50d19451d4f3/1600x1057.jpg)

## Summary

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

## Description

## 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**](mailto:karimsaif010@gmail.com) or on X **@karimsaif0**.

## Rank history [How rankings work →](/terms#rankings)

-   All · #7145

## Details

- **Author**: Karim Saif
- **Published**: 2026-07-24
- **Updated**: 2026-07-24
- **Added**: 2026-07-24
- **Categories**: Buttons

## More like this

-   [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button
-   [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face
-   [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover
-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow