CODEWITHSUNDEEP
htmlcss
Freddy
Freddy

Reputation: 867

Different hover behaviour for linear gradient backgrounds on divs

I have two div's for two different buttons. The only thing that changes between the two div's is that one has a background: #E82171; whereas another has a gradient background: linear-gradient(to right, #e82171 , #ef3e36);.

However, I want to understand why they both have different hover behaviour even though they both have the same styling?

body{
  background-color: blue;
}

/** BUTTON 1 **/ 

.formLink {
    text-align: center;
    display: inline-block;
    box-sizing: border-box;
    background: linear-gradient(to right, #e82171 , #ef3e36);
    padding: 24px 40px;
    border-radius: 100px;
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    font-weight: 900;
    margin-right: 0;
    margin-left: 0;
    transition: all 0.6s;
    outline:none;
    }
    
.formLink:hover {
    box-shadow: 0 0 20px #ffffff;
    background: #404262;
}


/** BUTTON 2 **/ 

.btn {
    display: inline-block;
    padding: 20px;
    border-radius: 100px;
    text-align: center;
    border: 0;
    cursor: pointer;
    transition: all 0.6s;
    color: #ffffff;
    outline: none;
    background: #E82171;
    font-size: 90%;
}
.btn:hover {
    box-shadow: 0 0 20px #ffffff;
    background: #404262;
}
<div class="formLink">Button 1</div>

<div class="btn">Button 2</div>

As you can see, hovering on button 1 is much more instant. I basically want button 1 to have a slow transition on hover, like in button 2.

For testing, I changed the linear gradient to background: #E82171; for button 1 and the transition works exactly how I want it. Unsure why linear gradient will effect this?

Edit:

After finding out there's no "direct" way to do this, I decided to find a workaround based off this solution.

body{
  background-color: blue;
}
.formLink {
    text-align: center;
    display: inline-block;
    background: linear-gradient(to right,#e82171,#ef3e36);
    padding: 24px 40px;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    font-weight: 900;
    transition: all .6s;
    background: -moz-linear-gradient(to right,#e82171,#ef3e36);
    background: -webkit-linear-gradient(to right,#e82171,#ef3e36);
    background: -o-linear-gradient(to right,#e82171,#ef3e36);
    background: linear-gradient(to right, #e82171, #ef3e36);
      background-repeat: repeat-x;
      background-repeat: repeat-y;
      background-size: 100%;
      background-position: 0 100% no-repeat;
      -webkit-transition: all 0.6s linear;
         -moz-transition: all 0.6s linear;
           -o-transition: all 0.6s linear;
              transition: all 0.6s linear;
}

.formLink:hover {
    box-shadow: 0 0 20px #fff;
    background: #404262;
    background-position: 0 0;
}


/*************/

/** BUTTON 2 **/ 

.btn {
    display: inline-block;
    padding: 20px;
    border-radius: 100px;
    text-align: center;
    border: 0;
    cursor: pointer;
    transition: all 0.6s;
    color: #ffffff;
    outline: none;
    background: #E82171;
    font-size: 90%;
}
.btn:hover {
    box-shadow: 0 0 20px #ffffff;
    background: #404262;
}
<div class="formLink">Download</div>
<div class="btn">Button 2</div>

I think my download button is nearly the same as button 2? You guys can advice better. However, I'm not sure why my download button "blinks" when hovering over it? The background disappears for a second and then reappears? Ideas on why? I need it to function exactly like button 2.

Upvotes: 3

Views: 506

Answers (1)

Rence
Rence

Reputation: 2950

To avoid the blinking behaviour, you need to use a copy of the button behind it - otherwise the background will be transparent during the opacity animation. You do not have to use a second div, you can use the pseudo element after instead:

https://jsfiddle.net/qLmpxgd8/2/

body{
  background-color: blue;
}

.formLink, .formLink:after {
    position: relative;
    text-align: center;
    display: inline-block;
    background: linear-gradient(to right,#e82171,#ef3e36);
    padding: 24px 40px;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    font-weight: 900;
    transition: all .6s;
    background: -moz-linear-gradient(to right,#e82171,#ef3e36);
    background: -webkit-linear-gradient(to right,#e82171,#ef3e36);
    background: -o-linear-gradient(to right,#e82171,#ef3e36);
    background: linear-gradient(to bottom, #e82171, #ef3e36);
      background-repeat: repeat-x;
      background-repeat: repeat-y;
      background-size: 100%;
      background-position: 0 100% no-repeat;
      -webkit-transition: all 0.6s linear;
         -moz-transition: all 0.6s linear;
           -o-transition: all 0.6s linear;
              transition: all 0.6s linear;
}

.formLink:after {
  content: "Download";
  position: absolute;
  left: 0;
  top: 0;
}

.formLink:hover:after {
    box-shadow: 0 0 20px #fff;
    background: #404262;
    background-position: 0 0;
}


/*************/

/** BUTTON 2 **/ 

.btn {
    display: inline-block;
    padding: 20px;
    border-radius: 100px;
    text-align: center;
    border: 0;
    cursor: pointer;
    transition: all 0.6s;
    color: #ffffff;
    outline: none;
    background: #E82171;
    font-size: 90%;
}
.btn:hover {
    box-shadow: 0 0 20px #ffffff;
    background: #404262;
}
<div class="formLink">Download</div>
<div class="btn">Button 2</div>

Upvotes: 3

Related Questions