Home > Article > Web Front-end > Shake buttons on hover using HTML and CSS
Shake buttons on hover using HTML and CSS
- WBOYforward
- 2023-09-11 19:41:02671browse
In this tutorial, we will learn to use HTML and CSS to shake a button on user hover. Creating a shake button can make your app's user experience more engaging.
We need to create a custom animation using CSS "keyframe" rules to shake any HTML element. We can then use custom keyframes as the value of the "animation" CSS property to shake the button when the user hovers over it.
grammar
Users can shake the hover button using HTML and CSS following the following syntax.
.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 created a custom CSS rule to add a shaking animation to the button. Users can replace "animation_time" with a time unit and "repetition" with a number to repeat the animation.
The Chinese translation ofExample
is:Example
In the example below, we shake the button vertically. We created a normal HTML button using the "button" tag and gave it a "btn" class name. We use the class name to access the button and style it.
In CSS, we use the "animation" property to add a "shake" keyframe to the button when the user hovers over it. In the Shake keyframe, we rotate the button "0 degrees" at 0% of the animation time, "5 degrees" at 20% of the time, "0 degrees" at 50% of the time, and "0 degrees" at 50% of the animation time. Time rotation button "5 degrees" 70% of the time is "0 degrees" and 100% of the time is "0 degrees".
In the output, the user can observe the button shaking in the vertical 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>
The Chinese translation of Example
is:Example
In the example below, we use HTML and CSS to shake the button horizontally.
We used the CSS property 'transform: translateX()' to shake the button horizontally. First, we move the button in the negative direction. Next, we move the button to its original position. Then, we move the button in the positive direction, and finally, we use CSS's 'keyframes' rule to move the button to its original position.<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>
The Chinese translation of Example
is:Example
In the example below, we will learn how to shake the button horizontally and vertically. We use ‘translateX()’ together with ‘rotate()’ as the value of the ‘transform’ CSS property.
'translateX()' moves the button horizontally, and the 'rotate()' function moves the button vertically. In the output, the user can observe that when they hover over the button, it moves slightly horizontally and vertically. However, the user can increase the parameter value of the ‘translateX()’ function to dither 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
In this tutorial, the user learned to jitter an HTML button using only CSS. In the first example, we learned to shake a button vertically. In the second example, we learned to shake the button horizontally; in the last example, we learned to shake the button horizontally and vertically.
The above is the detailed content of Shake buttons on hover using HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!