Home » CSS Wiggle Button Animation on Hover Effect

CSS Wiggle Button Animation on Hover Effect

by techmidpoint
CSS Wiggle Button Animation on Hover Effect

CSS Wiggle Button Animation on Hover Effect

This tutorial is about CSS button animation. When you move the mouse over the button the button shows the behavior of wiggle. I used here box-shadow and text-shadow to make buttons more attractive and for animation, I have used keyframes. Let’s see the example of CSS Wiggle Button Animation on Hover Effect

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>CSS wiggle button</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
       <div class="button"><p>Hover Me</p></div>
    </body>
</html>

CSS

body{
    background: #333;
    justify-content: center;
    align-items: center;
    height: 100vh;
    display: flex;
}
.button {
    position: fixed;
    text-align: center;
    font-size: 42px;
    font-family: Arial black;
    color: hsl(133, 80%, 50%);
    width: 350px;
    height: 100px;
    
    text-transform: uppercase;
    
    text-shadow: 
      0px 5px hsl(125, 80%, 30%), 
      0px 10px 10px rgba(14, 201, 23, 0.2);
    box-shadow: 
      0px 0px 0px 15px hsl(128, 90%, 50%),
      0px 10px 0px 15px hsl(135, 80%, 32%),
      0px 20px 20px 15px rgba(51, 194, 16, 0.2);
    cursor: pointer;
    border-radius: 100px 30px 100px 30px;
  
  }
  
  .button p {
    margin-top: 20px;
    transform: rotate(-3deg);
  }
  
  .button:hover {
    animation: .8s morph ease infinite;
  }
  
  .button:hover p {
    animation: .8s rot ease infinite;
  }
  
  @keyframes morph {
    0% {
      border-radius: 100px 30px 100px 30px;
    } 50% {
      border-radius: 30px 100px 30px 100px;
    } 100% {
      border-radius: 100px 30px 100px 30px;
    }
  }
  
  @keyframes rot {
    0% {
      transform: rotate(-5deg);
    } 50% {
      transform: rotate(5deg);
    } 100% {
      transform: rotate(-5deg);
    }

For More Tutorials Please Click Here

You may also like

Leave a Comment