Shake a Button on Hover using HTML and CSS

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.