Skip to content
Related Articles

Related Articles

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



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
Recommended Articles
Page :