mixins.scss

// Gradient button mixin
@mixin gradient_button($color) {
  @include background-image(linear-gradient($color, darken($color, 5%)));
  @include border-radius(4px);
  @include box-shadow(inset 0 1px 0 rgba(white,0.2),inset 0 0 5px rgba(black,0.2));
  border: 1px solid rgba(black,0.3);
  text-shadow: 0 1px 0 rgba(black,0.2);
  color: white;
  font-size: 116%;
  text-decoration: none;
  padding: 10px 12px;
  
  &:hover {
    @include background-image(linear-gradient(darken($color, 3%), darken($color, 8%)));
  }
}

// Implementation
.button {
  @include gradient_button(#30a1e6);
}