CSS3 Stylish buttons from Dira.ro, converted to SCSS

_buttons.scss

// ---
// Compass (v0.13.alpha.4)
// Sass (v3.2.7)
// ---


// Make making buttons easier
// https://css3-buttons.heroku.com/
// https://github.com/dira/CSS3-stylish-buttons
// This file has been converted to SCSS & requires Compass

@mixin gradient($top, $bottom) {
  background-color: $bottom;
  @include background-image(linear-gradient(top, $top, $bottom)); 
}

@mixin button {
  display: inline-block;
  padding: .5em 2em .55em;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  @include border-radius(.5em);
  // this determines Mozilla to show the padding
  border: solid 1px #ccc;
  @include box-shadow(0 1px 2px rgba(0,0,0,.2));
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
  &:hover {
    text-decoration: none;
  }
  &:active {
    position: relative;
    top: 1px;
  }
}

@mixin color($background) {
  border: solid 1px darken($background, 3%);
  @include gradient(lighten($background, 13%), $background);
  color: mix(#fff, $background, 90%);
  &:hover {
    @include gradient(lighten($background, 10%), darken($background, 5%));
  }
  &:active {
    @include gradient($background, lighten($background, 10%));
    color: mix(#fff, $background, 70%);
  }
}

// Mozilla: don't show border around the button's text on click
// This should probably be somewhere in the partials directory, 
// but we're gonna keep it here for modulatiry
button,
input[type="reset"],
input[type="button"],
input[type="submit"],
input[type="file"] > input[type="button"] {
  &::-moz-focus-inner {
    border: none;
  }
}

// Use it
// .btn {
//   @include button;
//   @include color(#d22);
// }

buttons-generated.css

/* Don't forget to @include button and @include color(#d22) in your SCSS file  */
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
  border: none;
}