Create a Jelly Button using HTML and CSS only

Buttons are an essential part of web development, and adding a touch of creativity to them can enhance the overall user experience. In this tutorial, we'll walk through the process of crafting a visually appealing Jelly button using HTML and CSS.

Also Read: Custom Play Button using HTML and CSS

HTML Structure 

Let's start with a simple HTML structure that sets the stage for our jelly button. In this example, we have a button enclosed within a main container.

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

The main container, identified by the #main-container ID, is styled using CSS to ensure our button is perfectly centered on the page.

CSS Magic

Styling the Main Container

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

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

By utilizing Flexbox properties, we ensure that the main container is responsive and centered both horizontally and vertically on the page. This provides a neat and organized layout for our button.

Button Styling

Now, let's dive into the styling of the jelly button itself. The .jelly-btn class defines the appearance and behavior of our button.

.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);
}

Also Read: Toggle Button using CSS

Adding a Jelly-Like Gradient

To achieve the Jelly-like effect, we introduce ::before and ::after pseudo-elements. These elements will create subtle lines above and below the button, enhancing its visual appeal.

.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;
}

The ::before and ::after elements add a touch of sophistication with their gradient lines, contributing to the overall jelly-like appearance.

Adding the Jelly Effect on Hover

We use keyframes to define a sequence of transformations, creating a delightful jelly effect.

The jelly-animation keyframes dictate the scaling behavior at different percentages of the animation. Adjusting these percentages allows for fine-tuning the jelly effect to your liking.

.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);
    }
}

Incorporating creative elements, such as a jelly button, not only showcases your design prowess but also engages users in a playful and memorable way. Feel free to experiment with the styles and animation properties to tailor the button to your specific needs. By combining HTML and CSS, you can transform a basic button into a visually captivating element that enhances the overall user experience on your website.

Download