css transition with linear gradient [duplicate]

Question

I'm trying to add a transition to a button I have that's background is made with css linear-gradient but it's not working.

This is the css for my button.

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)) } 

If you're wondering about @green and @greenhover, I'm using .less to make my css.

Anything wrong with this? Any ideas?

Answer 1

Sadly, you really can't transition gradients for now.

So, the only workable workaround is using an extra element with needed gradient and transition it's opacity:

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>