Hover Shake Button Hover Me
Hover Shake Button <html lang="en"> <head> <title>Hover Shake Button</title> <style> .shake-button { display: inline-block; padding: 10px 20px; background-color: #3498db; color: #fff; font-size: 16px; border: none; border-radius: 5px; cursor: pointer; transition: transform 0.3s; } .shake-button:hover { animation: shake 0.5s; } @keyframes shake { 0% { transform: translate(0, 0); } 25% { transform: translate(-5px, 0); } 50% { transform: translate(5px, 0); } 75% { transform: translate(-5px, 0); } 100% { transform: translate(0, 0); } } </style> </head> <body> <button class="shake-button">Hover Me</button> </body> </html> You may like these posts : Write Your Comment
Hover Shake Button <html lang="en"> <head> <title>Hover Shake Button</title> <style> .shake-button { display: inline-block; padding: 10px 20px; background-color: #3498db; color: #fff; font-size: 16px; border: none; border-radius: 5px; cursor: pointer; transition: transform 0.3s; } .shake-button:hover { animation: shake 0.5s; } @keyframes shake { 0% { transform: translate(0, 0); } 25% { transform: translate(-5px, 0); } 50% { transform: translate(5px, 0); } 75% { transform: translate(-5px, 0); } 100% { transform: translate(0, 0); } } </style> </head> <body> <button class="shake-button">Hover Me</button> </body> </html>
You may like these posts :