Why is hovering styling not working when applied to my div?

I was looking at the site https://gradientbuttons.colorion.co/. It has some awesome examples of buttons and hovering. I tried out their examples and I could not get them to work. This is what I have:

div {
  width: 90%;
  height: 200px;
  background-image: linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  background-image: -moz-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  background-image: -webkit-gradient(linear, left top, left right, color-stop(0%,#fffc00),color-stop(51%,#ffffff ), color-stop(100%,#fffc00 ));
  background-image: -webkit-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  background-image: -o-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  background-image: -ms-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  background-image: linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  border-radius: 15px;
  position: relative;
  margin: 0 auto;
  margin-top: 15px;
  -moz-box-shadow:
    inset 0 -3em 3em rgba(0,0,0,0.1),
    0 0  0 2px rgb(255,255,255),
    0.3em 0.3em 1em rgba(0,0,0,0.3);
  -webkit-box-shadow:
    inset 0 -3em 3em rgba(0,0,0,0.1),
    0 0  0 2px rgb(255,255,255),
    0.3em 0.3em 1em rgba(0,0,0,0.3);
  box-shadow:
    inset 0 -3em 3em rgba(0,0,0,0.1),
    0 0  0 2px rgb(255,255,255),
    0.3em 0.3em 1em rgba(0,0,0,0.3);
}

div:hover {
  background-position: right center;
}

<div></div>

It's not showing the animation that is shown on the website mentioned above.