5.1K
CSS Wiggle Button Animation on Hover Effect
This tutorial is about CSS button animation. When you move the mouse over the button the button shows the behavior of wiggle. I used here box-shadow and text-shadow to make buttons more attractive and for animation, I have used keyframes. Let’s see the example of CSS Wiggle Button Animation on Hover Effect
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS wiggle button</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="button"><p>Hover Me</p></div>
</body>
</html>
CSS
body{
background: #333;
justify-content: center;
align-items: center;
height: 100vh;
display: flex;
}
.button {
position: fixed;
text-align: center;
font-size: 42px;
font-family: Arial black;
color: hsl(133, 80%, 50%);
width: 350px;
height: 100px;
text-transform: uppercase;
text-shadow:
0px 5px hsl(125, 80%, 30%),
0px 10px 10px rgba(14, 201, 23, 0.2);
box-shadow:
0px 0px 0px 15px hsl(128, 90%, 50%),
0px 10px 0px 15px hsl(135, 80%, 32%),
0px 20px 20px 15px rgba(51, 194, 16, 0.2);
cursor: pointer;
border-radius: 100px 30px 100px 30px;
}
.button p {
margin-top: 20px;
transform: rotate(-3deg);
}
.button:hover {
animation: .8s morph ease infinite;
}
.button:hover p {
animation: .8s rot ease infinite;
}
@keyframes morph {
0% {
border-radius: 100px 30px 100px 30px;
} 50% {
border-radius: 30px 100px 30px 100px;
} 100% {
border-radius: 100px 30px 100px 30px;
}
}
@keyframes rot {
0% {
transform: rotate(-5deg);
} 50% {
transform: rotate(5deg);
} 100% {
transform: rotate(-5deg);
}
For More Tutorials Please Click Here
