Flip background using CSS or LESS - html

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

Answer 2

I am not sure about your background-image:linear-gradient(top, #fff, #000); css rule but if you want to change button's background I guess this is the way - instead of .class selector use [type=''] otherwise :active wont work:
input[type="button"] {background:#fff;}
input[type="button"]:active {background:#000}
[...]
<input type="button" value="Test"/>

Answer 3

You mean like this:
http://jsfiddle.net/UgQvg/2
?

Answer 4

Unfortunately, I don't think LESS can work that way. You're basically trying to reference the colors of a nested scope using an outside scope - or rather, trying to get a polymorphism-like behavior. LESS just doesn't do that. It's cumbersome, but you'll probably have to define the :active portion for each button type. See this JsFiddle.
Now, I think you can do something like this using SASS (like LESS, but server-side, Ruby-based), perhaps using a list variable containing the specialized button classes, and then an #each loop to generate the :active styles. But that's probably overkill, unless you have a lot of specialized styles.
Nonetheless, if you're using LESS, you might want to take a look at LESS Elements - a useful set of mixins, which includes gradient support.