Comportement différent au survol pour les arrière-plans à gradient linéaire sur les divs

Question

J'ai deux div's pour deux boutons différents. La seule chose qui change entre les deux div's, c'est que l'un d'entre eux possède une balise background: #E82171; alors qu'un autre présente un gradient background: linear-gradient(to right, #e82171 , #ef3e36); .

Cependant, je voudrais comprendre pourquoi les deux ont un comportement de survol différent alors qu'ils ont le même style ?

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>

Comme vous pouvez le voir, en passant la souris sur button 1 est beaucoup plus instantané . Je veux essentiellement button 1 pour avoir une transition lente au survol, comme dans button 2 .

Pour le test, j'ai changé le gradient linéaire en background: #E82171; para button 1 et la transition fonctionne exactement comme je le veux. Je ne suis pas sûr que le gradient linéaire ait un effet sur cette transition.

Modifier :

Après avoir découvert qu'il n'y a pas de moyen "direct" de le faire, j'ai décidé de trouver une solution de contournement basée sur les éléments suivants cette 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>

Je pense que mon télécharger est presque identique à bouton 2 ? Vous pouvez mieux me conseiller. Cependant, je ne suis pas sûr de savoir pourquoi mon télécharger clignote lorsque vous le survolez ? L'arrière-plan disparaît pendant une seconde, puis réapparaît ? Vous savez pourquoi ? J'ai besoin qu'il fonctionne exactement comme bouton 2 .

Answer 1

Pour éviter le comportement de clignotement, vous devez utiliser une copie du bouton derrière lui - sinon l'arrière-plan sera transparent pendant l'animation d'opacité. Vous n'êtes pas obligé d'utiliser un deuxième div, vous pouvez utiliser le pseudo-élément after à la place :

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>