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

Question

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.

Provide the `````` code please so that we can try to find solution — Abhishek Pakhare, Dec 27 '19 at 16:27

score 3 · Answer 1 · 2019-12-27T16:36:08.817

According to their source you're missing transition: 0.5s; so the transition is not instantaneous, and background-size: 200% auto; to increase the button's background width so when it scrolls to the right it has content to display.

Using their source, here's an example of a simple button:

.btn-grad {
  padding:15px;
  background-image: linear-gradient(to right, #2b5876 0%, #4e4376  51%, #2b5876  100%);
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    box-shadow: 0 0 20px #eee;
    display: block;
}
.btn-grad:hover { 
  background-position: right center; 
}

<button class="btn-grad">Submit</button>

And here's your code:

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);
    transition: 0.5s;
    background-size: 200% auto;
}

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

<div></div>

Glad it did! Just in case, I edited the answer with a snippet of your code + the two missing rules. — , Dec 27 '19 at 16:35
Here's a jsfiddle for those who want to play around with the code https://jsfiddle.net/qk7cpn5s/1/ — Jimmy, Dec 27 '19 at 16:35

score 1 · Answer 2 · answered Dec 27 '19 at 16:32

1

You are missing with transition: 0.5s; background-size: 200% auto; css properties

answered Dec 27 '19 at 16:32

Bhavana

101
4

score 0 · Answer 3 · answered Dec 27 '19 at 16:36

Please check this. This is work on all the browsers.

div {
  transition: 0.5s;
  background-size: 200% auto;
  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>

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

3 Answers3