Creating the shaking hover effect in CSS:

when you hover over the button, it will shake to the right, then to the left, and finally return to its original position. as you see in the image.

Let's generate the HTML and CSS code step by step for the shaking hover effect:

HTML: 

<a href="#" class="button">Hover Me</a> 

In this step, we set up the HTML structure. We have an anchor tag (<a>) with a class of "button" that says "Hover Me." We also link our CSS file.

CSS:

body { background-color: #333; display: flex; justify-content: center; 
align-items: center; height: 100vh; margin: 0; }
 .button { text-decoration: none; color: white; 
font-family: sans-serif; font-size: 40px; border: 3px solid white; 
padding: 40px 80px; 
transition: color 0.3s, border-color 0.3s; }

In this step, we apply basic styles to the body and the button. The button has a dark gray background (#333) and is centered in the middle of the screen. We set the button's text color to white, added some padding, and defined a transition for the color and border-color properties.

Shaking Animation Keyframes

@keyframes shake { 33% { transform: rotate(9deg); }
 66% { transform: rotate(-9deg); }
 100% { transform: rotate(9deg); } }

In this step, we define the @keyframes animation named "shake." This animation causes the button to shake by rotating it. At 33% of the animation duration, it rotates 10 degrees to the right. At 66%, it rotates 10 degrees to the left. At 100%, it rotates 10 degrees to the right again.

Apply the Animation on Hover

.button:hover { animation: shake 0.3s linear 1; }

In this step, we apply the "shake" animation to the button when it is hovered over. The animation has a duration of 0.3 seconds, a linear timing function, and runs only once (1 iteration).

That's it! see Demo: Codepen