Comment 1 Tim Buschtoens 2010-05-25 08:40:27 EDT

What background does the button have when not hovered? What is the desired effect?

You can currently only animate from one gradient to another or from one solid color to another.

Comment 2 Stefan Röck 2010-05-25 14:45:16 EDT

Ok, I understand. As a workaround, defining a trivial gradient with the same start and stop color works.
However, defining a animation from no background (transparent) to a gradient cannot be achieved this way.

Button[PUSH].animationBackgroundImage {
  background-color: transparent;
  /*background-image: gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff) );*/
  animation: hoverIn 200ms linear, hoverOut 500ms ease-out;
}

Button[PUSH].animationBackgroundImage:hover {
	background-image: gradient(linear, left top, left bottom, from(#ffffff),
	color-stop(49%, #FFECAC), color-stop(50%, #FFDA59), to(#FFFCDF) );
}

Comment 3 Tim Buschtoens 2010-05-26 04:27:31 EDT

I think these hover-effects (solid-to-gradient and transparent-to-solid/gradient) are a valid usecase and doable in theory. It would also be nice to extend the hover effect to the border, though possibly problematic. (I have seen several cases where this could be useful, e.g. the business/fancy themes menubar.) I will investigate the posibility to implement those features when i have some time on my hands.