How to create Shaky button using HTML and CSS ?

The shaky button is a type of button effect which was introduced in the past decade. It is one of the least used effects that we used to style a button. This can be used whenever a button is acting like a snooze button.

Approach: The approach for creating this animation is the use of the skewX() function with keyframes to animate the skew angle on each frame.

HTML Section: In this section, the basic HTML page structure is defined and a new button is created that would be later styled with CSS.

Code:

HTML



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Shaky Button</title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>
        Creating a shaky button using
        HTML and CSS
    </b>
    <p style="margin: 25px;">
  
        <!-- Create the shaky button -->
        <button class="shaky-btn">
            GeeksforGeeks
        </button>
    </p>
  
</body>
  
</html>

chevron_right


CSS Section: In this section, we will style the button and apply animations to it to get the desired effect. The steps given below are to be followed:

  • Step 1: Create a new class that will be used to style the button. Apply basic styling to this button class like margin, padding, and some border to space out and position the button.
  • Step 2: Use skewX() function to tilt the button to a particular angle on the x-axis. The angle should be a negative value for the first time.
  • Step 3: Use the hover selector to apply the animation and effects when the button is being hovered over.
  • Step 4: Use keyframes to create the animation using the skew function. The order of angle should be alternate between the original negative angle and its positive value. One frame could be divided into multiple frames by specifying how many times the button would shake.

Tip: The use of the :before selector is completely optional, one can style the button with a different effect, however, it has to be made sure that the angle values are used alternatively, one being positive and other being negative,

Code:

CSS

filter_none

edit
close

play_arrow

link
brightness_4
code

<style>
    /* Style the button */
    .shaky-btn {
        width: 200px;
        height: 50px;
  
        background: white;
        font-size: 24px;
        transform: skewX(-10deg);
  
        cursor: pointer
    }
  
    /* Specify the effect when the
       button is hovered over */
    .shaky-btn:hover {
        animation: shake 0.4s ease-out;
        border: 2px solid green;
        color: green;
    }
  
    /* Use the keyframes for defining 
       the animation */
    @keyframes shake {
        0% {
            transform: skewX(-10deg);
        }
  
        25% {
            transform: skewX(10deg);
        }
  
        50% {
            transform: skewX(-10deg);
        }
  
        75% {
            transform: skewX(10deg);
        }
  
        100% {
            transform: skewX(-10deg);
        }
    }
</style>

chevron_right


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

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Shaky Button</title>
  
    <style>
  
        /* Style the button */
        .shaky-btn {
            width: 200px;
            height: 50px;
  
            background: white;
            font-size: 24px;
            transform: skewX(-10deg);
            cursor: pointer;
        }
  
        /* Specify the effect when the
        button is hovered over */
        .shaky-btn:hover {
            animation: shake 0.4s ease-out;
            border: 2px solid green;
            color: green;
        }
  
        /* Use the keyframes for defining 
        the animation */
        @keyframes shake {
            0% {
                transform: skewX(-10deg);
            }
  
            25% {
                transform: skewX(10deg);
            }
  
            50% {
                transform: skewX(-10deg);
            }
  
            75% {
                transform: skewX(10deg);
            }
  
            100% {
                transform: skewX(-10deg);
            }
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>Creating a shaky button using
        HTML and CSS</b>
    <p style="margin: 25px;">
  
        <!-- Create the shaky button -->
        <button class="shaky-btn">
            GeeksforGeeks
        </button>
    </p>
</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.