<div class="button-container">
  <button type="button" class="wiggle-button"><span class="wiggle-text">Hover Me!</span></button>
</div>
.button-container{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.wiggle-button{
  text-align: center;
  font-size: 30px;
  color: #000;
  background: #fff;
  width: 250px;
  height: 80px;
  border-radius: 30px;
  border: none;
  box-shadow: 
    0px 0px 0px 10px #ed6ac2,
    0px 10px 0px 10px #cc55a5,
    0px 20px 20px 15px #0003;
  cursor: pointer;
  border-radius: 50px 20px 50px 20px;
}


.wiggle-button span {
  margin-top: 20px;
  transform: rotate(-3deg);
}

.wiggle-button:hover {
  animation: .8s morph ease infinite;
}

.wiggle-button:hover span {
  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(-3deg);
  } 50% {
    transform: rotate(3deg);
  } 100% {
    transform: rotate(-3deg);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.