How to create Shaky button using HTML and CSS? Last Updated : 18 Jun, 2024 Summarize Comments Improve Suggest changes Share 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 Neon Light Button using HTML and CSS? S sirohimukul1999 Follow Improve Article Tags : CSS CSS-Misc HTML-Misc HTML-Questions CSS-Questions +1 More Similar Reads 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 2 min read 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 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 2 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 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 3 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 Like