Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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
To shake a button on hover using HTML and CSS, we should have basic understanding of CSS animations and keyframes. We will be understanding how to utilize CSS animation and keyframes to apply shaking effect to a button on hovering.
In this article, we are having buttons wrapped inside a div container. Our task is to shake button on hover using HTML and CSS.
Steps to Shake Button on Hover Using HTML and CSS
To shake a button on hover using HTML and CSS, we will be utilizing CSS animation and transform properties. We will be following below mentioned steps for shaking a button on hover using HTML and CSS:
- To create button, we have created a button using HTML button tag and wrapped it inside a div element with classname container which centers the button.
- For centering the button, we have used display and flex properties such as justify-content for centering horizontally, align-items to center the button vertically and set the container height.
- To design the button, we have used btn class which sets the border, border-radius, background-color and text color. We have also applied padding and alignment of text written on button using CSS text-alignment property and set the font-size of the button.
- We have used :hover psuedo class which sets background, text color and animation for button upon hovering on it.
- We have created animation with name shaking using keyframes which is responsible for shaking of button. We have used rotate function of transform property which rotates the button by: -5deg at 20%, 5deg at 70% and remains at it's original position at 0%, 5% and 100% creating a shaking effect.
Example 1
Here is a complete example code implementing above mentioned steps to shake a button on hover using HTML and CSS.
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
}
.btn {
text-align: center;
padding: 10px 20px;
border: 1px solid #031926;
border-radius: 5px;
background-color: #031926;
color: white;
font-size: 15px;
}
.btn:hover {
background-color: white;
color: #031926;
animation: shaking 0.3s linear 2;
}
@keyframes shaking {
0%, 50%, 100% {
transform: rotate(0deg);
}
20% {
transform: rotate(-5deg);
}
70% {
transform: rotate(5deg);
}
}
</style>
</head>
<body>
<h3>
Shaking Button on Hover using HTML and CSS
</h3>
<p>
In this example we have used CSS animations
with <strong>rotate</strong> function to
Shake a Button on Hover using HTML and CSS.
</p>
<div class="container">
<button class="btn">Submit</button>
</div>
</body>
</html>
Example 2
In this example, we have created and designed three buttons which is same as in example 1. The first, second and third button shake horizontally, vertically and in both directions respectively upon hovering on it.
- We have created separate class for each buttons which are: translatex, translatey and trans_rotate.
- The translatex class creates an animation shakingx which uses translateX function to shake button back and forth horizontally.
- Similarly, translatey class creates an animation shakingy which uses translateY function and trans_rotate class creates an animation shakingxy which uses translateX and rotate function to shake button upon hovering on it.
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
gap: 50px;
}
.btn {
text-align: center;
padding: 10px 20px;
border: 1px solid #031926;
border-radius: 5px;
background-color: #031926;
color: white;
font-size: 15px;
}
.translatex:hover {
background-color: white;
color: #031926;
animation: shakingx 0.4s linear 2;
}
@keyframes shakingx {
0%,90% {
transform: translateX(-10px);
}
20%,80% {
transform: translateX(-5px);
}
50%,70% {
transform: translateX(10px);
}
}
.translatey:hover {
background-color: white;
color: #031926;
animation: shakingy 0.4s linear 2;
}
@keyframes shakingy {
0%,90% {
transform: translateY(-10px);
}
20%,80% {
transform: translateY(-5px);
}
50%,70% {
transform: translateY(10px);
}
}
.trans_rotate:hover {
background-color: white;
color: #031926;
animation: shakingxy 0.4s linear 2;
}
@keyframes shakingxy {
0%,50%,100% {
transform: translateX(0) rotate(0deg);
}
25% {
transform: translateX(15px) rotate(7deg);
}
75% {
transform: translateX(-15px) rotate(-7deg);
}
}
</style>
</head>
<body>
<h3>
Shaking Button on Hover using HTML and CSS
</h3>
<p>
In this example, the <strong>first</strong>
button shake <strong>horizontally</strong>,
the <strong>second</strong> button shake
<strong>vertically</strong>, and the <strong>
third</strong> button in <strong>both</strong>
direction.
</p>
<div class="container">
<button class="btn translatex">Submit</button>
<button class="btn translatey">Submit</button>
<button class="btn trans_rotate">Submit</button>
</div>
</body>
</html>
Conclusion
In this article, we understood how to shake a button on hover using HTML and CSS. We used CSS animations and keyframes for creating shaking effect of button along with various functions of CSS transform property such as rotate, translateX and translateY function.
4K+ Views
