Create Jelly Button Animation using HTML CSS

In the modern web design era, interactive UI components like animated buttons significantly enhance user engagement. One such standout component is the Jelly Button Animation — a fun, bouncy effect triggered on hover that gives your buttons life and personality. In this post, we’ll show you how to create a stylish, responsive CSS jelly effect button using only HTML and CSS, without any JavaScript!

This creative button hover animation is perfect for landing pages, CTAs or interactive UI elements where you want to grab the user’s attention in a subtle but dynamic way.

HTML Structure

We begin by defining a simple HTML structure consisting of a container and a button element. This button will be styled and animated entirely with CSS to achieve the jelly-like bounce effect on hover.

<div class="main-container">
    <button class="jelly-btn">Hover Me</button>
</div>

• <div class="main-container"> acts as the flexbox parent that centers our content both vertically and horizontally.
• <button class="jelly-btn"> is the button that will receive the animated bounce (jelly) effect.
• The text inside the button (Hover Me) can be customized to suit your call-to-action needs.

This minimal HTML structure ensures the component remains lightweight, responsive and easy to integrate into any part of your web page.

Jelly Button Animation using CSS

The styling and animation magic happens entirely in CSS. The jelly button hover effect uses @keyframes and transform: scale3d() to simulate a springy motion. Additionally, shadows and highlights give it a soft-glass aesthetic with depth.

.main-container {
    min-width: 200px;
    min-height: 100vh;
}

.main-container,.jelly-btn{
    display: flex;
    justify-content: center;
    align-items: center;
}

.jelly-btn {
    width: 100px;
    height: 40px;
    border-radius: 20px;
    font-family: 'Calibri';
    border: none;
    position: relative;
    font-weight: 700;
    cursor: pointer;
    color: white;
    background-color: #4e7da2;
    box-shadow: 0px 10px 10px #c0c9e9 inset, 0px 3px 8px 0px rgb(255 255 255 / 21%), 0px -10px 10px #304d6a inset;
    transform: scale3d(1, 1, 1);
}

.jelly-btn::before,.jelly-btn::after{
    content: "";
    width: 70%;
    height: 2px;
    position: absolute;
    filter: blur(1px);  
    border-radius: 50%;
}

.jelly-btn::before {
    top: 7px;
    background-color: rgba(250, 250, 250, 0.678);
}

.jelly-btn::after {
    background-color: rgba(250, 250, 250, 0.137);
    bottom: 7px;
}

.jelly-btn:hover {
    animation: jelly-animation 1s both;
}

@keyframes jelly-animation {
    0% {
        transform: scale3d(1, 1, 1);
    }

    25% {
        transform: scale3d(1.25, 0.75, 1);
    }

    35% {
        transform: scale3d(0.75, 1.25, 1);
    }

    45% {
        transform: scale3d(1.15, 0.85, 1);
    }

    60% {
        transform: scale3d(0.95, 1.05, 1);
    }

    70% {
        transform: scale3d(1.05, 0.95, 1);
    }

    100% {
        transform: scale3d(1, 1, 1);
    }
}

• .main-container ensures the button is always centered in the viewport.
• .jelly-btn has rounded corners, a modern inset + outer box-shadow combo and a subtle glossy look using ::before and ::after highlights.
• The :hover trigger applies a jelly-animation which scales the button in multiple directions to create a squishy, elastic feel.
• The @keyframes jelly-animation sequence uses scale3d to stretch and compress the button smoothly in various axes — mimicking a jelly bounce.

The CSS-only implementation makes the jelly button Animation incredibly easy to add to any project without the need for extra scripts or external libraries. It’s a clean, performant and interactive UI component built for modern web design.

The HTML & CSS jelly button is an eye-catching, bouncy interactive element that adds flair to your UI without heavy resources. It’s especially useful for call-to-action buttons, interactive prompts or gamified interfaces. With its sleek shadowing and hover animation, this CSS animated button is both elegant and responsive — perfect for developers aiming to boost user engagement through microinteractions.

Live Preview