How to create Shaky button using HTML and CSS?

How to create Shaky button using HTML and CSS?

Last Updated : 18 Jun, 2024

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

How to create Shaky button using HTML and CSS?

S

sirohimukul1999

Improve

Article Tags :

Similar Reads

How to create a shinny button using HTML and CSS ?

Buttons are undoubtedly one of the most important components of any website or app. A button should be designed in such a way that it stands out of the other component so that it is becoming clear to the user where to click and what is the button used for. There are infinite ways in which a button c

How to Create Neon Light Button using HTML and CSS?

The neon light button animation effect can be easily created by using HTML and CSS. By using HTML, we will design the basic structure of the button and then by using the CSS, we can create the neon light animation effect. HTML code: In this section, we will design a simple button structure using anc

How to create gradient search button using HTML and CSS ?

In this article, we will see how to create a gradient search button using HTML & CSS, along with knowing its basic implementation through the examples. The creation of a gradient search button involves the CSS linear-gradient() function, which sets the background color of the button. Here, we ha

How to Create a Transparent Button using HTML and CSS?

Transparent buttons are a popular design choice in modern web development, as they create a sleek and minimalist look. By using CSS, you can easily create buttons with fully transparent or semi-transparent backgrounds. This article uses the background-color: transparent; property to design the trans

How to create waves on button with CSS and HTML?

The wave effect on a button is a type of effect in which the shape of the button turns into a wave on hovering. While there are other ways to create a wave effect, a simple method is to use the keyframe property. Approach: In order to animate the button, we use keyframe to gradually set the transiti