css transition with linear gradient

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>