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.