Shake a Button on Hover using HTML and CSS Last Updated : 08 Jun, 2020 Comments Improve Suggest changes Like Article Like Report 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 will create a basic button using HTML and then we will use the @keyframes rule to specify the animation code. The below sections will guide you on how to create the effect. HTML Code: In this section, we will create a basic button using the button tag. HTML <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Shake Button on Hover</title> </head> <body> <div> <button id="btn">Button</button> </div> </body> </html> CSS Code: In this section, first we will design the button using CSS basic properties, then to create the shake effect or animation we will use the @keyframes rule, we will use the translateX() and rotate() functions to reposition the button element on x axis the create the desired effect when we hover over it. CSS <style> body { margin: 0; padding: 0; } div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #btn { text-align: center; height: 60px; width: 200px; display: block; font-size: 1.5em; background: #68E73C; } #btn:hover { animation: effect 0.4s infinite; } @keyframes effect { 0% { transform: translateX(0px) rotate(0deg); } 20% { transform: translateX(-4px) rotate(-4deg); } 40% { transform: translateX(-2px) rotate(-2deg); } 60% { transform: translateX(4px) rotate(4deg); } 80% { transform: translateX(2px) rotate(2deg); } 100% { transform: translateX(0px) rotate(0deg); } } </style> Complete Code: It is the combination of the above two code sections. HTML <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Shake Button on Hover</title> <style> body { margin: 0; padding: 0; } div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #btn { text-align: center; height: 60px; width: 200px; display: block; font-size: 1.5em; background: #68E73C; } #btn:hover { animation: effect 0.4s infinite; } @keyframes effect { 0% { transform: translateX(0px) rotate(0deg); } 20% { transform: translateX(-4px) rotate(-4deg); } 40% { transform: translateX(-2px) rotate(-2deg); } 60% { transform: translateX(4px) rotate(4deg); } 80% { transform: translateX(2px) rotate(2deg); } 100% { transform: translateX(0px) rotate(0deg); } } </style> </head> <body> <div> <button id="btn">Button</button> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article Create a Button Group using HTML and CSS L lakshgoel204 Follow Improve Article Tags : Web Technologies Web Templates Similar Reads How to Shake Text on hover using HTML and CSS? Shaking Text animation is a very cool animation which can be used in websites, this animation can be easily created using some basic HTML and CSS, the below section will guide on how to create the animation.HTML Code: In this section we have a basic div element which contains some text inside of it. 2 min read How to Fade a Button on Hover using CSS ? Fading a button on Hover in CSS is a visually engaging effect that can be done using various approaches. Below are the approaches to fade a button on hover using CSS: Table of Content Using opacity PropertyUsing Linear Gradient with RGBA ValueUsing opacity PropertyThis approach utilizes the CSS opac 2 min read 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 3 min read 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 2 min read How to add a button to an image using CSS ? In the article, we will explore how to add a button to an image using CSS. Adding a button to an image is often used to create an overlay effect to a button on an image that provides an interactive and engaging layout on a webpage. We can achieve this effect with the combination of various CSS Prope 4 min read Split Skewed Button Hover Animation using CSS Split Skewed Button Hover Animation effect can be created using the before and after pseudo-classes in CSS. On hovering change skewness and swap the positions of before and after pseudo-class. Steps: Create an HTML file named index.html.Create a div element for the button.Add styles to the button.On 2 min read Like