How to create Shaky button using HTML and CSS? Last Updated : 15 Jul, 2025 Comments Improve Suggest changes Like Article 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. ApproachHTML 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: Output Comment More infoAdvertise with us Next Article How to create waves on button with CSS and HTML? S sirohimukul1999 Follow Improve Article Tags : CSS CSS-Misc HTML-Misc HTML-Questions CSS-Questions +1 More Similar Reads 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 4 min read 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 2 min read 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 2 min read How to create a Hero Image using HTML and CSS ? A Hero Image is a large image with text, often placed at the top of a webpage. Hero images can be designed using HTML and CSS. This article contains two sections. The first section attaches the image and designs the basic structure. The second section designs the images and texts on the images. The 2 min read How to create a Hero Image using HTML and CSS ? A Hero Image is a large image with text, often placed at the top of a webpage. Hero images can be designed using HTML and CSS. This article contains two sections. The first section attaches the image and designs the basic structure. The second section designs the images and texts on the images. The 2 min read How To Create Download Buttons using CSS ? In CSS, we can create and style the download buttons to enhance the overall web interface of the application. Various styling properties like padding, hover, and animation can be added to the buttons. Below are the different approaches for creating a download button in CSS: Table of Content Download 3 min read Like