Different hover behaviour for linear gradient backgrounds on divs

Question

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.

seems like its not possible: https://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds — Roland Starke, Jul 03 '18 at 14:57
If you are willing to use js, you could emulate the behaviour: https://opticalcortex.com/animating-css-gradients/ However, there does not seem to be a css only way. — Rence, Jul 03 '18 at 14:59
@Sirence - I'd rather avoid the use of JS. I've attempted to workaround the issue based on a previous solution. I've updated my question to reflect my current approach. Maybe you could help? — Freddy, Jul 04 '18 at 08:45
Your button blinks because you are chaning the solid red background to a transparent one with the opacity animation - the only way to avoid this is to position a copy of the button without animation behind it, and put the animated one over it. I'll post the code below. — Rence, Jul 04 '18 at 09:33

score 3 · Accepted Answer · answered Jul 04 '18 at 09:38

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>

Hover effect work exactly how I want it! Cheers! I was looking to maybe add an arrow icon to a few of these buttons, but unsure on how I can make the icon display before and after hover? I.e. https://jsfiddle.net/8fbytp3e/25/ - getting the text and arrow in 'formLink' to appear as is on 'btn'? You've already answered my original question, so let me know if it's best to open a new question for this. — Freddy, Jul 04 '18 at 10:18
An easy solution would be to use a second div instead of the :after - simply a copy of the first button, with the text and the arrow image inside it. You will need to position it exactly like the first button. If you want to open a second question, I will adjust the fiddle for you once I return from my lunch break (unless somebody else posts first). — Rence, Jul 04 '18 at 10:33
@Freddy: here you go: https://jsfiddle.net/8fbytp3e/31/ Just replaced the after with a new div, with the same content as the parent div. — Rence, Jul 04 '18 at 11:07
Legend! Cheers for your help and also for explaining everything! — Freddy, Jul 04 '18 at 11:53
You are very welcome! I just saw my button in the linked fiddle was too big though, just remove the `height: 100%` and `width: 100%`: https://jsfiddle.net/8fbytp3e/33/ — Rence, Jul 04 '18 at 12:04

Different hover behaviour for linear gradient backgrounds on divs

1 Answers1