62 votes

transition css avec dégradé linéaire

J'essaie d'ajouter une transition à un bouton que j'ai dont l'arrière-plan est créé avec un dégradé linéaire css mais cela ne fonctionne pas.

C'est le css de mon bouton.

 a.button
{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@green), color-stop(100%,#a5c956));
-webkit-transition: background 5s linear;
}

a.button:hover
{
-webkit-gradient(linear, left top, left bottom, color-stop(0%,@greenhover), color-stop(100%,#89af37))
}

Si vous vous posez des questions sur @green et @greenhover, j'utilise .less pour faire mon css.

Quelque chose ne va pas avec ça ? Des idées?

47voto

kizu Points 15989

Malheureusement, vous ne pouvez vraiment pas faire de transition entre les dégradés pour le moment.

Ainsi, la seule solution de contournement réalisable consiste à utiliser un élément supplémentaire avec le dégradé et la transition nécessaires pour son opacité :

 a.button {
  position: relative;
  z-index: 9;
  display: inline-block;
  padding: 0 10px;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(green), to(#a5c956));
  background: -webkit-linear-gradient(top, green, #a5c956);
  background: -moz-linear-gradient(top, green, #a5c956);
  background: -o-linear-gradient(top, green, #a5c956);
  background: linear-gradient(top, green, #a5c956);
}

.button-helper {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(lime), to(#89af37));
  background: -webkit-linear-gradient(top, lime, #89af37);
  background: -moz-linear-gradient(top, lime, #89af37);
  background: -o-linear-gradient(top, lime, #89af37);
  background: linear-gradient(top, lime, #89af37);
  -webkit-transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  -o-transition: opacity 1s linear;
  transition: opacity 1s linear;
}

a.button:hover .button-helper {
  opacity: 1;
}
 <a href="#" class="button"><span class="button-helper"></span>button</a>

6voto

Mark Choi Points 61

Vous pouvez simuler des transitions de dégradé en utilisant des ombres portées ! Par exemple, à partir d'une de mes pages :

 c { 
color: #FFF;
background: #000;
border-style:solid;
border-color:#CCC;
border-width: 0 0 0 1px;
box-shadow: 2px 2px 2px #555, inset 0 25px 20px -10px rgba(255, 255, 255, 0.3),
    inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 2px 2px 2px #555, inset 0 25px 20px -10px rgba(255, 255, 255, 0.3),
    inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15);
-o-box-shadow: 2px 2px 2px #555, inset 0 25px 20px -10px rgba(255, 255, 255, 0.3),
    inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 2px 2px 2px #555,
    inset 0 25px 20px -10px rgba(255, 255, 255, 0.3),
    inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15);
-moz-transition: background-color .5s ease; 
-o-transition: background-color .5s ease; 
-webkit-transition: background-color .5s ease-in-out; 
transition: background-color .5s ease;
}

Suivie par:

 c:hover {
color:#FFF;
background: #505;
position:relative;
top:1px;
box-shadow: -1px -1px -1px #555,inset 0 20px 20px -10px rgba(0, 0, 0, 0.15), 
        inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3);
-moz-box-shadow: -1px -1px -1px #555,inset 0 20px 20px -10px rgba(0, 0, 0, 0.15),
    inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3);
-o-box-shadow: -1px -1px -1px #555, inset 0 20px 20px -10px rgba(0, 0, 0, 0.15), 
        inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3);
-webkit-box-shadow: 1px -1px -1px #555, inset 0 20px 20px -10px rgba(0, 0, 0, 0.15), 
    inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3);
}

Ici, vous utilisez essentiellement une ombre incrustée comme masque de type Photoshop, provoquant un effet de dégradé sur l'élément sous-jacent. Au survol, vous inversez l'effet.

2voto

Hampus Ahlgren Points 185

Si vous faites la légère surbrillance lorsque vous survolez le bouton, il existe une solution beaucoup plus simple. Vous pouvez simplement abaisser un peu le dégradé et faire en sorte que la couleur d'arrière-plan soit la même que la couleur supérieure de votre dégradé : http://cdpn.io/oaByI

C'est assez limité, je sais, mais cela fonctionne bien pour ce cas d'utilisation.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X