<div class="wrap">
  <h1>Make Animating CSS3 Gradients Possible</h1>
  <a class='button-1' href="#">
    On Fire
  </a>
  <a class='button-2' href="#">
    Buy a Hot dog
  </a>
  <a class='button-3' href="#">
    Eery Glow
  </a>
</div>

@import "compass/css3";

$grad-col: orange;
* {
  @include box-sizing(border-box);  
}
body {
  background: #efefef;
}
.wrap {

  /* just setup the page */
  margin: 50px auto;
  width: 80%;
  text-align: center;
  a {
    display: inline-block;
    margin: 10px;
  }
}

h1 {
  text-shadow: 0px 1px 2px rgba(0,0,0,0.65)
  
}

.button {
  /* Common button properties */
  padding: 20px 30px;
  border-radius: 20px / 30px;

  text-decoration: none;
  text-transform: uppercase;
  font-family: Futura, sans-serif;
  font-weight: bold;
  letter-spacing: 0.2em;

  color: #fff;
  background-color: red; 

  box-shadow: 0 1px 1px rgba(0,0,0,0.65);
  text-shadow: 0 1px 1px rgba(255,255,255,0.65);  
  /* Just do transitions on the background-color and border-radius */
  transition: 
    background-color .5s ease-in-out, 
    color .5s ease-in-out,
    text-shadow .5s ease-in-out,
    border-radius .5s ease-in-out;
  
  &:hover {
    background-color:  orange; /* default hover */
  }
  &:active{
    box-shadow: inset 0 3px 10px rgba(0,0,0,0.65);      
  }
}
.button-1 {
  @extend .button;  /* SASS inherit the button styles */
  
  /* @include background is a Compass mixin */
  /* The top background will go from transparent(red) to orange, showing the background below. */
  @include background( 
    linear-gradient(transparent, orange), /* top background gradient*/
    red                                   /* bottom background color*/
    );
  
  &:hover { background-color: yellow; }
}
.button-2 {
  @extend .button;
  @include background( 
      linear-gradient( rgba(255,0,0,0.25) 20%, orange 50%, rgba(255,0,0,0.25) 90%), orange
  );
  text-shadow: 0 1px 2px black;
  &:hover { 
    background-color: red; 
    color: rgba(120,0,0,1);
    text-shadow: 0 1px 2px yellow;
  }
}
.button-3 {
  @extend .button;
  font-size: 16px;
  line-height: 40px;
  width: 120px;
  text-align: center;
  @include background( 
      radial-gradient(50% 80%, cover, black 40%, transparent 100%), black 
  );
  border-radius: 3px;

  &:hover { 
    background-color: lime; 
    border-radius: 140px; 
  }
}