<button>
  Button
</button>
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
body{
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
button {
  padding: 15px 30px;
  font-size: 18px;
  outline: none;
  border: none;
  cursor:pointer;
  border-radius: 10px;
  transition: 0.5s;
  background: #1e1e1e;
  color: greenyellow;
  box-shadow: 0 0 10px #363636, inset 0 0 10px #363636;
}

button:hover {
  animation: a 0.5s 1 linear;
}

@keyframes a {
  0% {
    transform: scale(0.7, 1.3);
  }

  25% {
    transform: scale(1.3, 0.7);
  }

  50% {
    transform: scale(0.7, 1.3);
  }

  75% {
    transform: scale(1.3, 0.7);
  }

  100% {
    transform: scale(1, 1);
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.