A Pen by Bilal Çınarlı.

index.html

<a class="button-blue">Blue Button</a>
<span class="button-purple">Purple Button</span>
<button class="button-green">Green Button</button>
<input type="submit" class="button-gray" value="Gray Button" />
<a class="button-black">Black Button</a>
<span class="button-white">White Button</span>

Sass-buttons.markdown

Sass buttons

Button mixin sample build with Sass

A Pen by Bilal Çınarlı on CodePen.

License.

style.scss

@import "compass";
$white-transparent: rgba(white, 0);
$gray-transparent: rgba(gray, 0);
$black-transparent: rgba(black, 0);

@mixin button($color, $radius: 5px, $gradient: true) {
  /** parameters **/
  $light: lighten($color, 20%);
  $dark: darken($color, 15%);
  $text-color: #fff;
  $text-shadow: black;
  $transparent: $gray-transparent;
  @if (lightness($color) > 60%){
    $transparent: $white-transparent;
    $text-color: #000;
    $text-shadow: #eee;
  }
  @else if(lightness($color) < 20%){
    $transparent: $black-transparent;
  }
  /** parameters **/
  
  border-color: $dark;
  
  @if $radius != null {
    border-radius: $radius;
  }
  
  background-color: $light;
  @if $gradient == true {
    @include background-image(linear-gradient($transparent, $color));
  }
  color: $text-color;
  text-shadow: 0 1px 0 rgba($text-shadow, 0.3);
  box-shadow: 0 1px 3px rgba($dark, 0.5);
  
  &:hover {
      background-color: $dark;
      @if $gradient == true {
        @include background-image(linear-gradient($gray-transparent, $dark));
      }
   }
   
   &:active {
      background: $dark;
      box-shadow: 0 1px 3px rgba($dark, 0.5), inset 0 1px 2px rgba($light, 0.5);
    }
}

body { padding: 20px; }

* { @include transition(all 0.5s ease); }

[class*="button-"] { cursor: pointer; display: inline-block; margin: 0 5px; padding: 5px 10px; border: 1px solid; }
[class*="-blue"] { @include button(#1b8dbe); }
[class*="-purple"] { @include button(#7b4284); }
[class*="-green"] { @include button(#6a9d31); }
[class*="-gray"] { @include button(#848484); }
[class*="-black"] { @include button(#222); }
[class*="-white"] { @include button(#eee); }