Cool wiggly hover animation with CSS
I saw this cool-looking wiggly hover animation on byline recently and found it quite fascinating. It looks like this.
I dug it and here’s how it’s done.
button:hover {
animation: wiggle 0.5s ease-in-out infinite;
}
@keyframes wiggle {
0% {
rotate: 0deg;
translate: 0 0
}
25% {
rotate: -2deg;
translate: -5px 0
}
80% {
rotate: 2deg;
translate: 5px 0
}
}
As you can tell, we are invoking the wiggle animation on the hover state of the button. The wiggle animation is essentially a keyframe animation that rotates the button by a certain degree and translates it by a certain amount of pixels on a certain percentage of the animation. And it does this infinitely.
I think this kind of animation is best suites for the elements that want to seek attention of the user. And it’d certainly tempt the user to click on the target element in my opinion.
Here’s a CodePen for you to play around with.
See the Pen Button Matrix by Amit Merchant (@amit_merchant) on CodePen.
Like this article? Consider leaving a
Tip
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
