Open In App

How to create Shaky button using HTML and CSS?

Last Updated : 15 Jul, 2025
Comments
Improve
Suggest changes
1 Likes
Like
Report

To create a shaky button using HTML and CSS involves adding an animation effect to a button element, making it appear to shake when interacted with. This effect can be used to draw attention to buttons, such as a snooze button or a button requiring immediate action.

Approach

  • HTML page structure is defined and a new button is created that would be later styled with CSS.
  • In the CSS, the ".shaky-btn" class styles the button with specific dimensions, background color, font size, and an initial skew transformation for a slanted appearance.
  • The ".shaky-btn: hover" class defines the hover effect, triggering the shake animation, adding a green border, and changing the text color to green.
  • The @keyframes shake rule defines the shake animation by alternating the button's skew transformation between -10 and 10 degrees.
  • When the button is hovered over, the animation smoothly transitions through the defined keyframes, creating a shaking effect.

Example: The example shows how to create a Shaky button using HTML and CSS

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>Shaky Button</title>
    <link rel="stylesheet" 
          href="style.css">
</head>

<body>
    <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 
.shaky-btn {
    width: 200px;
    height: 50px;

    background: white;
    font-size: 24px;
    transform: skewX(-10deg);

    cursor: pointer
}
.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);
    }
}

Output:

btn
Output

S

sirohimukul1999
Improve
Article Tags :

Explore

Lightbox