animate background gradient change of featurelet buttons

[floatingatoll]

when :hover on a featurelet button, the border fades in smoothly over 0.5s, but the background gradient snaps from A to B instantly, creating a distracting flash effect.

[floatingatoll]

i was able to fix this by changing .featurelet .inner's color-stop to rgba(0,0,0,0) and setting background-color to color A, and then removing all background-image lines from :hover and setting background-color to color B.

approximately:

 .featurelet .inner {
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a46a42), color-stop(100%, #6e472c));
+  background-color: #6e472c;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a46a42), color-stop(100%, rgba(0,0,0,0)));

and:

 .featurelet .inner:hover {
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a46a42), color-stop(100%, #492f1e));
+  background-color: #492f1e;

I imagine this can be done in SCSS, but I don't seem to have a working ruby install sufficient to deal with the @include "compass" bit.