How to create Shaky button using HTML and CSS ?

Last Updated : 27 Jul, 2020

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

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

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

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

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

HTML

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