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

Create a Button Group using HTML and CSS

This article will show you how to create a Button Group with the help of HTML and CSS. To create the Button Group, first, we create buttons using the HTML <button> element and then apply some CSS styles to make all buttons in a group. First, we create a div container with the class name .butto

How to create a animated pill shaped button using HTML and CSS ?

Most mobile applications and websites have some eye-catching animation that tries to grab the attention of the user, these animations trigger some event fire or on an infinite loop, website events are triggered on mouse clicks or mouse hovers while on mobile touch events or infinite loop is activate

How to Create Animated Loading Button using CSS?

An animated loading button provides a visual cue during processing, often featuring a spinner or pulsing effect. To create one using CSS, style a button element, include a spinner inside, and use CSS animations (like keyframes) to animate the spinner on button activation.Table of ContentUsing Font A

How to create Text Buttons using CSS ?

In this article, we are going to see how to create text buttons using CSS. The text button is a button that appears to be text but acts as a button if we press it. Text buttons are different from anchor tags even if they might look similar. To create text buttons first, we create simple buttons in H

Shake a Button on Hover using HTML and CSS

The shake button effect also known as the wiggle effect can be used to make the website look more responsive and dynamic. This is one of the best effects to understand the concept of @keyframes rule in CSS. Approach: The shake button effect or animation can be created using HTML and CSS, First, we w