Code Box
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cool Wiggle Effect For Buttons | Css Animation - HTML & CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <a href="" class="wiggle-btn"> <span>Click Here!</span> <img src="btn5.png" class="btn-img" alt=""> </a> <!--<a href="" class="wiggle-btn"> <span>Download</span> <img src="btn1.png" class="btn-img" alt=""> </a> <a href="" class="wiggle-btn"> <span>Read More</span> <img src="btn2.png" class="btn-img" alt=""> </a> <a href="" class="wiggle-btn"> <span>View More</span> <img src="btn3.png" class="btn-img" alt=""> </a> <a href="" class="wiggle-btn"> <span>Hover Me!</span> <img src="btn4.png" class="btn-img" alt=""> </a>--> </body> </html>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins',sans-serif; } body{ background-color: #fff; min-height: 100vh; display: flex; justify-content: center; align-items: center; } .wiggle-btn{ position: relative; display: flex; justify-content: center; align-items: center; cursor: pointer; animation: wiggle 2s linear infinite; transform-origin: 50% 8em; animation-delay: 1s; } .wiggle-btn:hover{ animation: none; } @keyframes wiggle{ 0%, 5%{ transform: rotateZ(0); } 15%{ transform: rotateZ(-15deg); } 20%{ transform: rotateZ(10deg); } 25%{ transform: rotateZ(-10deg); } 30%{ transform: rotateZ(6deg); } 35%{ transform: rotateZ(-4deg); } 40%, 100%{ transform: rotateZ(0); } } .wiggle-btn:before{ z-index: 000; content: ""; position: absolute; width: 220px; height: 50px; box-shadow: 0 5px 25px rgba(2, 2, 2, 0.5); } .wiggle-btn span{ z-index: 222; position: absolute; color: #fff; text-transform: uppercase; font-size: 1.3em; font-weight: 300; letter-spacing: 1px; text-shadow: 0 5px 25px rgba(2, 2, 2, 1); } .wiggle-btn .btn-img{ z-index: 111; width: 250px; }