web-dev-qa-db-fra.com

transition css avec dégradé linéaire

J'essaie d'ajouter une transition à un bouton dont le fond est en css linear-gradient mais cela ne fonctionne pas.

C'est le css pour 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 interrogez sur @green et @greenhover, j'utilise .less pour créer mes css.

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

css-transitionscss
43
Johan Alkstål

Malheureusement, vous ne pouvez vraiment pas faire la transition des gradients pour le moment.

Ainsi, la seule solution de contournement possible consiste à utiliser un élément supplémentaire avec le dégradé et la transition nécessaires: l'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>

35
kizu

c'est délicat .. et bien sûr délicat, c'est cool;)

ok .. j'ai une solution. et cela se fait essentiellement via un incroyable sélecteur :before

#cool-hover{
	width: 120px;
	height: 120px;
	display: block;
	cursor: pointer;
	border-radius: 10px;
	box-shadow: 0 0 15px rgba(0,0,0,0.3);
	margin: 0px auto 24px auto;
	transition: all 0.5s;
	position: relative;
	overflow: hidden;
}
#cool-hover:before{
	border-radius: inherit;
	display: block;
	width: 200%;
	height: 200%;
	content: '';
  position: absolute;
  top: 0; left: 0;
	background: linear-gradient(135deg, #21d4fd 25%, #b721ff 75%);	
	transition: all 0.5s;
	transform: translate(-25%, -25%);
	z-index: 0;
}
#cool-hover:after{
	border-radius: 9px;
	display: block;
	width: 108px;
	height: 108px;
	margin: 6px;
	background: url('https://i.imgur.com/w0BjFgr.png');
	background-size: cover;
	content: '';
	position: absolute;
	top: 0; left: 0;
	z-index: 1;
}
#cool-hover:hover:before{
	transform: translate(-25%, -25%) rotate(-180deg);
}
#cool-hover:hover{
	box-shadow: 0 0 35px rgba(0,0,0,0.3);
}
<div id="cool-hover"></div>

NOTE: Je viens d'ajouter la classe Sudo :after uniquement pour les petits espaces en haut de l'image.

avoir un beau style génial;)

11
Biskrem Muhammad

Vous pouvez simuler des transitions de dégradés à l'aide d'ombres portées! Par exemple, à partir de l'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;
}

Suivi 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, ce qui provoque un effet de dégradé sur l'élément sous-jacent. En survol, vous inversez l'effet.

4
Mark Choi

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

Je sais que c'est assez limité, mais si cela fonctionne bien pour ce cas d'utilisation.

2
Hampus Ahlgren

Je sais que cette question est assez ancienne, mais j'ai trouvé un bon moyen d'animer des dégradés de base qui fonctionneraient dans certains cas.

Cette méthode vous permettra d’animer un changement de couleur du dégradé mais pas un changement de position de la couleur s’arrête.

https://jsfiddle.net/62vzydeh/

HTML:

<div class="button">
    Click Me!
</div>

CSS:

.button {

  width: 200px;
  height: 30px;

  margin: 50px;
  padding-top: 10px;

  color: #C0C0C0;
  background: linear-gradient(to left, #F8F8F8, transparent 30%);
  background-color: #808080;

  text-align: center;
  font-family: sans-serif;

  cursor: pointer;

  transition: background-color 500ms;
}

.button:hover {

  background-color: #A0A0A0;
}
1
Gogeta70

une façon hacky que j'ai essayée mettait beaucoup de <spans> pour répliquer "la position", CSS ne pirate que ici: https://codepen.io/philipphilip/pen/OvXEaV

0
philip

Je connais cette jolie vieille mais je n'ai pas encore trouvé de bonne solution. Donc ici j'ai fait une bonne solution pour cela. 

Créez d'abord le dégradé sur ": before et masquez-le avec une opacité, puis opacité de transition 1 en survol 

https://jsfiddle.net/sumon380/osqLpboc/3/

HTML:

<a href="#" class="button">Button</a>

CSS: 

.button {
    text-decoration: none;
    padding: 10px 25px;
    font-size: 20px;
    color: #333;
    display: inline-block;
    background: #d6e9eb;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease-out;

}
.button:before {
    background: #91a5f4;
    background: linear-gradient(135deg, #91a5f4 0%, #b08cf9 86%);
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease-out;
}
.button:hover:before {
    opacity: 1;
}
.button:hover {
    color: #fff;
}
0
user2462948