Shake a Button on Hover using HTML and CSS

Last Updated : 08 Jun, 2020

The shake button effect also known as the wiggle effect can be used to make the website look more responsive and dynamic. This is one of the best effects to understand the concept of @keyframes rule in CSS.

Approach: The shake button effect or animation can be created using HTML and CSS, First, we will create a basic button using HTML and then we will use the @keyframes rule to specify the animation code. The below sections will guide you on how to create the effect.

HTML Code: In this section, we will create a basic button using the button tag. HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>Shake Button on Hover</title>
</head>

<body>
    <div>
        <button id="btn">Button</button>
    </div>
</body>

</html>

CSS Code: In this section, first we will design the button using CSS basic properties, then to create the shake effect or animation we will use the @keyframes rule, we will use the translateX() and rotate() functions to reposition the button element on x axis the create the desired effect when we hover over it.

CSS

<style>
    body {
        margin: 0;
        padding: 0;
    }

    div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #btn {
        text-align: center;
        height: 60px;
        width: 200px;
        display: block;
        font-size: 1.5em;
        background: #68E73C;
    }

    #btn:hover {
        animation: effect 0.4s infinite;
    }

    @keyframes effect {
        0% {
            transform: translateX(0px) rotate(0deg);
        }

        20% {
            transform: translateX(-4px) rotate(-4deg);
        }

        40% {
            transform: translateX(-2px) rotate(-2deg);
        }

        60% {
            transform: translateX(4px) rotate(4deg);
        }

        80% {
            transform: translateX(2px) rotate(2deg);
        }

        100% {
            transform: translateX(0px) rotate(0deg);
        }
    }
</style>

Complete Code: It is the combination of the above two code sections.

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>Shake Button on Hover</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        #btn {
            text-align: center;
            height: 60px;
            width: 200px;
            display: block;
            font-size: 1.5em;
            background: #68E73C;
        }

        #btn:hover {
            animation: effect 0.4s infinite;
        }

        @keyframes effect {
            0% {
                transform: translateX(0px) rotate(0deg);
            }

            20% {
                transform: translateX(-4px) rotate(-4deg);
            }

            40% {
                transform: translateX(-2px) rotate(-2deg);
            }

            60% {
                transform: translateX(4px) rotate(4deg);
            }

            80% {
                transform: translateX(2px) rotate(2deg);
            }

            100% {
                transform: translateX(0px) rotate(0deg);
            }
        }
    </style>
</head>

<body>
    <div>
        <button id="btn">Button</button>
    </div>
</body>

</html>

Output:

Create a Button Group using HTML and CSS

lakshgoel204

Improve

Article Tags :

Shake a Button on Hover using HTML and CSS

Similar Reads

Thank You!

What kind of Experience do you want to share?