Flip background using CSS or LESS

Question

Is there a way to programmatically flip the background of an element using CSS or LESS? Specifically, I would like to invert the background gradient of a button. I do not want the content of the button to be flipped - just the background.

For example, this:

.button {background-image:linear-gradient(top, #000, #fff);}

should become:

.button:active {background-image:linear-gradient(top, #fff, #000);}

----------- EDIT: Adding more detail. -----------

Take this LESS code:

.button {

  background-image:linear-gradient(top, red, green);

  &.primary {background-image:linear-gradient(top, blue, yellow);}
  &.secondary {background-image:linear-gradient(top, brown, grey);}

  &:active {background-image:linear-gradient(top, ..., ...);}

}

Is there a way for me to reverse the direction of the gradient without having to define the ":active" state separately for the ".button", ".primary" and ".secondary" classes?

Answer 1

With Newer Browsers

This post is over a year old, but I thought I would note there is a solution now for some of the newer browsers. The following has been tested in IE10 (does not work in IE9 and under), FF21, and Chrome27.

Using a pseudo element and a transform, you can get what you originally desired. Originally, some issues did not allow transforms on pseudo elements, so this will not function in some older versions.

Here is the example fiddle. Though for fallback support, you may still want the additional vendor prefixes.

LESS

.button {

  background-image:linear-gradient(to bottom, red, green);
  position: relative;

  &:after {
     content: '';  
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: -1;

     &:active {
       -webkit-transform: rotate(180deg);
          -moz-transform: rotate(180deg);
           -ms-transform: rotate(180deg);
            -o-transform: rotate(180deg);
               transform: rotate(180deg);
     }
  }

  &.primary {background-image:linear-gradient(to bottom, blue, yellow);}
  &.secondary {background-image:linear-gradient(to bottom, brown, grey);}

}