CSS Gradient Transitions

Using CSS gradients as part of the background-image property are great, but they don't work well for transitions. You can get around this by creating gradients that use opacities and change the background-color instead (live demo):

button
{
  background-color: #5096C8;
  @ include transition(background-color 150ms ease-in);
  @ include background-image(
    linear-gradient(
      top,
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.2) 30%,
      rgba(0, 0, 0, 0.1) 60%,
      rgba(0, 0, 0, 0.3)
    )
  );

  &:hover
  {
    background-color: green;
  }
}

• Note - there should not be a space between the "@" and "include", but Coderwall seems to make them into links when together