Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Shake a Button on Hover using HTML and CSS
In this tutorial, we will learn to shake a button when the user hovers using HTML and CSS. Creating a shaking button makes the UX of the application more attractive.
We need to create a custom animation using the CSS ‘keyframes’ rules to shake any HTML element. After that, we can use custom keyframes as a value of the ‘animation’ CSS property to shake the button when the user hovers over the button.
Syntax
Users can follow the syntax below to shake a button on hover using HTML and CSS.
.btn:hover {
animation: key_frame_name animation_time repetition;
}
@keyframes key_frame_name {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(10deg);
}
}
In the above syntax, we have created the custom CSS rule to add shaking animation to the button. Users can replace the ‘animation_time’ with a time unit and ‘repetition’ with a number to repeat the animation.
Example
In the example below, we shake the button vertically. We have created the normal HTML button using the ‘button’ tag and given the ‘btn’ class name. We accessed the button using the class name and styled it.
In CSS, we used the ‘animation’ property to add ‘shaking’ keyframes to the button when users hover the button. In the ‘shaking’ keyframe, we rotate the button by ‘0 deg’ at 0% of animation time, ‘5 deg’ at 20% of the time, ‘0 deg’ at 50% of the time, ‘5 deg’ at 70% of the time, and again ‘0 deg’ at 100% of the time.
In the output, users can observe the shaking button in the verticle direction.
<html>
<style>
.btn {
justify-content: center;
align-items: center;
height: fit-content;
padding: 10px 20px;
border: 1px solid #000;
border-radius: 5px;
background-color: red;
color: white;
font-size: 40px;
}
.btn:hover {animation: shaking 0.5s infinite;}
@keyframes shaking {
0% {transform: rotate(0deg);}
20% {transform: rotate(-4deg);}
50% {transform: rotate(0deg);}
70% {transform: rotate(4deg);}
100% {transform: rotate(0deg);}
}
</style>
<body>
<h2> Shaking the button vertically using HTML and CSS </h2>
<p> Please hover the cursor over the button below to see the shaking effect.</p>
<div>
<button class = "btn"> Submit </button>
</div>
</body>
</html>
Example
We shake the button horizontally using HTML and CSS in the example below.
We have used the ‘transform: translateX()’ CSS property to shake the button in the horizontal direction. First, we move the button in the negative direction. Next, we move the button to the original position. After that, we move the button in a positive direction, and finally, we move the button to the original position using the CSS ‘keyframes’ rules.
<html>
<style>
.btn {
justify-content: center;
align-items: center;
height: fit-content;
padding: 10px 20px;
border: 1px solid #000;
border-radius: 5px;
background-color: black;
color: white;
font-size: 40px;
}
.btn:hover {animation: shaking 0.4s infinite;}
@keyframes shaking {
0% {transform: translateX(-10px);}
20% {transform: translateX(-5px);}
50% {transform: translateX(-5px);}
70% {transform: translateX(-5px);}
80% {transform: translateX(10px);}
90% {transform: translateX(-10px);}
}
</style>
<body>
<h2> Shaking the button Horizontally using HTML and CSS </h2>
<p> Please hover the cursor over the button below to see the shaking effect.</p>
<div>
<button class = "btn"> Hover the Button </button>
</div>
</body>
</html>
Example
In the example below, we will learn to shake the button horizontally and vertically. We use the ‘translateX()’ and ‘rotate()’ together as ‘transform’ CSS property values.
The ‘translateX()’ moves the button horizontally, and the ‘rotate()’ function moves the button vertically. In the output, users can observe that it moves slightly horizontally and vertically when they hover over the button. However, users can increase the argument value of the ‘translateX()’ function to shake a bit more in the horizontal direction.
<html>
<style>
.btn {
justify-content: center;
align-items: center;
height: fit-content;
padding: 10px 20px;
border: 1px solid #000;
border-radius: 5px;
background-color: green;
color: white;
font-size: 25px;
}
.btn:hover {animation: shaking 0.4s infinite;}
@keyframes shaking {
0% {transform: translateX(0) rotate(0deg);}
25% {transform: translateX(15px) rotate(5deg);}
50% {transform: translateX(0px) rotate(0deg);}
75% {transform: translateX(-15px) rotate(-5deg);}
100% {transform: translateX(0px) rotate(0deg);}
}
</style>
<body>
<h3> Shaking the button Horizontally and vartically using HTML and CSS</h3>
<div>
<button class = "btn"> Point out the Button </button>
</div>
</body>
</html>
Conclusion
Users learned to shake the HTML button using CSS only in this tutorial. In the first example, we learned to shake the button vertically. In the second example, we learned to shake the button horizontally; in the final example, we learned to shake the button in horizontal and vertical directions.
2K+ Views
