HTML AND CSS INTERACTIVITY: CREATE CLICK TO SHRINK, BOUNCE, SHAKE, FLIP, & SWING BUTTON ANIMATIONS

4 min readJan 22, 2024

Introduction

Welcome to the world of interactive web design, where every click brings enchanting button animations to life. In this blog post, we’re embarking on a journey that delves into the captivating world of button animations using the magic of HTML and CSS. Prepare to be amazed as we unveil the creation of five click-responsive button effects: CLICK TO SHRINK, CLICK TO BOUNCE, CLICK TO SHAKE, CLICK TO FLIP, and CLICK TO SWING.

Why do Interactive Button Animations Matter?
Interactive button animations are more than just visual flair; they’re the secret ingredient to enhancing user experience, making calls to action (CTAs) irresistible, and adding a touch of professionalism to your website. Whether you’re a novice or a seasoned web designer, these animations are your key to elevating your website’s interactivity.

The “CLICK TO SHRINK, CLICK TO BOUNCE, CLICK TO SHAKE, CLICK TO FLIP, and CLICK TO SWING” Effect

This post combines five animation effects:

The “CLICK TO SHRINK Button” Effect: With the “CLICK TO SHRINK Button” animation, buttons respond to your clicks, elegantly shrinking and expanding to captivate your website visitors and add an engaging dynamic touch.
The “CLICK TO BOUNCE Button” Effect: The “CLICK TO BOUNCE Button” animation introduces buttons that bounce with every click, adding a playful and dynamic element to your website, creating an immersive and interactive experience.
The “CLICK TO SHAKE Button” Effect: With the “CLICK TO SHAKE Button” animation, buttons shake in response to your clicks, creating an attention-grabbing visual effect that draws users’ attention and adds an exciting element to your website.
The “CLICK TO FLIP Button” Effect: The “CLICK TO FLIP Button” animation engages users with immersive flips on every click, adding a touch of elegance and interactivity to your website.
The “CLICK TO SWING Button” Effect: The “CLICK TO SWING Button” animation reveals buttons that swing into view with smooth and elegant animation, creating a lasting impression on your website visitors.

Youtube Video Link:

Get the Code

For those of you ready to roll up your sleeves and add these animations to your website, I’ve provided the complete code for each effect. You can access it below and follow along as we bring these animations to life.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Animations</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="center-container">
        <button class="animated-button click-shrink">Click to Shrink</button>
        <button class="animated-button click-bounce">Click to Bounce</button>
        <button class="animated-button click-shake">Click to Shake</button>
        <button class="animated-button click-flip">Click to Flip</button>
        <button class="animated-button click-swing">Click to Swing</button>
    </div>
</body>
</html>

styles.css

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.center-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.animated-button {
    padding:  15px 30px;
    font-size: 1.2rem;
    border: none;
    color: #fff;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    margin: 20px;
}


/* Shrink Animation */
.click-shrink {
    background: #ff6f6f;
}

.click-shrink:active {
    transform: scale(0.9);
}


/* Bounce Animation */
.click-bounce {
    background: #2980b9;
}

.click-bounce:active {
    animation: bounce 0.5s ease-in-out;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}


/* Shake Animation */
.click-shake {
    background: #20bdbd;
}

.click-shake:active {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}


/* Flip Animation */
.click-flip {
    background: #2ad470;
}

.click-flip:active {
    transform: rotateY(180deg);
}


/* Swing Animation */
.click-swing {
    background: #0026a3;
}

.click-swing:active {
    animation: swing 0.8s ease-in-out;
}

@keyframes swing {
    0% {
        transform: rotate(0);
    }
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-15deg);
    }
    60% {
        transform: rotate(10deg);
    }
    80% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(0);
    }
}

This code will give your button that mesmerizing “CLICK TO SHRINK, CLICK TO BOUNCE, CLICK TO SHAKE, CLICK TO FLIP, and CLICK TO SWING” animation. Feel free to customize the colors and dimensions to match your website’s style.

Subscribe and Stay Inspired

If you’re passionate about web design and eager for more tips, tricks, and tutorials, subscribe to our channel and hit the notification bell. We have a treasure trove of web design interactivity coming your way!

The world of web design is at your fingertips. Dive into the code, experiment, and let the magic of HTML and CSS elevate your web design skills.

Channel Link: https://www.youtube.com/@lostbongcoder

Happy Coding!!! 🌟🌟🙌😺

HTML AND CSS INTERACTIVITY: CREATE CLICK TO SHRINK, BOUNCE, SHAKE, FLIP, & SWING BUTTON ANIMATIONS

Introduction

The “CLICK TO SHRINK, CLICK TO BOUNCE, CLICK TO SHAKE, CLICK TO FLIP, and CLICK TO SWING” Effect

Get the Code

Subscribe and Stay Inspired

Written by Lost Coder