Shake Button Animation with Pure HTML and CSS

Interactive buttons are an essential part of a user interface, and adding a little motion can make them stand out. In this tutorial, we’ll show you how to create a “shake” effect button using only HTML and CSS — no JavaScript required.

What is a Shake Button?

A shake button is a simple button that vibrates or shakes slightly when hovered over. This kind of effect draws attention and can increase interaction, especially for call-to-action elements like “Submit”, “Apply”, or “Buy Now”.

How It Works

This button uses a CSS @keyframes animation named shake3856 to apply a series of small, rapid translations when the user hovers over it.

1. Basic Button Styling

The button is styled with:

Rounded edges (pill shape using border-radius: 10em)
Blue background
White text
Clean, modern font styling

2. Hover Animation

When the user hovers over the button, the :hover selector triggers the shake3856 animation. The animation:

Runs for 0.3 seconds
Loops infinitely
Uses small translations in alternating directions (left, right, up, down)

This creates the illusion of a button that is “shaking” in place, like it’s buzzing to grab attention.

Why Use a Shake Animation?

Improves user engagement: Movement draws the eye and encourages action.
Lightweight: No need for external libraries or JavaScript.
Customizable: You can adjust the shake intensity, speed, and duration.

Where You Can Use It

This shake effect works well for:

Call-to-action buttons
Login or registration forms
Error or warning indicators
Game or entertainment websites

Learn and Customize

If you’re learning CSS animations, this is a perfect example to practice:

Try changing the duration or direction of the shake
Adjust the size or colors of the button
Combine it with other CSS effects like shadows or gradients

Tools like Learn Code Online Free Of Cost let you test and edit live code, helping you understand how each part of the animation works in real-time.

Final Thoughts

This shake button is a creative way to add micro-interactions to your website. With just a few lines of CSS, you can add movement that catches users’ attention and makes your site feel more dynamic and polished.

Start simple, shake things up, and give your buttons a playful personality — all with pure CSS.

This code uses HTML and CSS only — no JavaScript included.

MIT License

Permission is freely granted to anyone who obtains a copy of this software and its accompanying documentation files (referred to as “the Software”), allowing them to use, copy, modify, merge, publish, distribute, sublicense, and even sell copies of the Software. Additionally, users are allowed to permit others to use the Software under these same terms.

It is required that the above copyright notices and this permission notice be included in all versions or significant portions of the Software.

Please note, the Software is provided “as is”, without any form of warranty—express or implied. This includes, but is not limited to, warranties of merchantability, fitness for a specific purpose, or non-infringement. Under no circumstances shall the original authors or rights holders be held responsible for any claims, damages, or other liabilities that may arise from the use of the Software, whether through legal action, negligence, or otherwise.

All code on Freeofcosts.com is reviewed before publishing. Each post includes a live code editor with real-time preview, so you can experiment and learn by doing. Most code is open-source and free to use or modify under respective licenses.