Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----

@import url(http://s0.wp.com/_static/??-eJydktluAjEMRX+oIV0A0Yeq35LFJAZnUZZB/ftmAhQoVVr1aWznnujmjvkhMvSKqobMVc5ci2xRBZ8XDv2iTR74d4nQ7YhJkW4kjSngC49UDfrMiwUHzIGvHbq0d4Sr7AzlKrNKGAs2B3wbiMJhpLdhgsRklZKauVw+CEZy9IQeWIHkMq/4O0C4b/fuoESh9qx3I/lXMu1cBccuSQ0gFRK0uYuizAoHGgVQS8uXEebi+kzNpW0G77311JuvjeIGPKT+Z38u/8heRYbch3KcnouR4aaBq4jY9DxSGwiMghLzJtw0bEsCh4EmkBRMK03fvEs7gmLI5Xg1z1akGT59xy7/F6pdckNBChpuk7IIU1+EzA+oDZRhwCdJf7QJQScQugPv7u1p+bh63ayW65fdJ7Fce8Y=);

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  padding: 5%;
  text-align: center;
}

div {
  margin: 15px 0;
}


// OPTIONS
//
// background: <color>
// color: <color>
// icon: "/f122" unicode value
// style: social, bfb (big fuckin button)
// blink: fuck-yeah, pulse

$buttons:(
  primary:(
    background: #00aadc
  ),
  secondary:(
    background: #eee,
    color: #444
  ),
  download:(
    background: green,
    color: white,
    icon: '\f440', // download icon
  ),
  twitter:(
    background: #55acee,
    color: white,
    icon: '\f202', // twitter-icon
    style: 'social'
  ),
  fuck-yeah:(
    background: blue,
    color: white,
    icon: '\f444',
    // blink: 'fuck-yeah',
    blink: 'pulse',
    style: 'bfb'
  )
);

// Base button styles
%button {
  display: inline-block;
  margin: 0;
  padding: 0.538em 0.769em; // 7/13 10/13
  border-width: 1px;
  border-style: solid;
  border-radius: 0.230em; // 3/13
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
}
 
// The Mixin
@mixin button($map...) {
  @extend %button;
  
  @each $type in $map {
    // Defaults
    $background: #0085be;
    $color: #fff;
    $icon: false;
    $style: default;
    $blink: none;

    @if map-has-key($type, background) {
      $background: map-get($type, background);
    }
    @if map-has-key($type, color) {
      $color: map-get($type, color);
    }
    background: $background;
    border-color: darken( $background, 10% );
    color: $color;
    @if map-get($type, style) == 'bfb' {
      font-size: 2em;
    }
    @if map-get($type, blink) == 'fuck-yeah' {
      animation: blink .75s linear INFINITE;
    }
    @if map-get($type, blink) == 'pulse' {
      animation: pulse .5s ease-in infinite alternate;
    }

    @if map-has-key($type, icon) {
      @if map-has-key($type, style) {
        &:before {
          content: map-get($type, icon);
          display: inline-block;
          margin-top: -5px;
          margin-right: 10px;
          font-family: 'Genericons';
          font-size: 1.538em; // 20/13
          line-height: 0;
          vertical-align: middle;
        }
      } @else {
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        text-indent: -9999px;
        text-align: left;

        &:before {
          content: $icon;
          display: inline-block;
          margin: 4px 0 0 9px;
          font-family: 'Genericons';
          font-size: 1.538em; // 20/13
          vertical-align: middle;
          position: absolute;
          width: 40px;
          top: 0;
          left: 9999px;
          width: 100%;
          height: 100%;
        }
      }
    }
    &:hover,
    &:focus {
      background: darken( $background, 5% );
      border-color: darken( $background, 15% );
      color: $color;
    }
    &:active {
      background: darken( $background, 10% );
      border-color: darken( $background, 15% );
      color: $color;
    }
    &[disabled],
    &:disabled {
      color: hsl( hue( $background ), 10%, 80% ) !important;
      background: darken( $background, 8% ) !important;
      border-color: darken( $background, 15% ) !important;
    }
    &:visited {
      color: $color;
    }
  }
}

@each $type in map-keys($buttons) {
  .button-#{$type} {
    @include button(map-get($buttons, $type));
  }
}

@keyframes blink {
  50% {
    opacity: 1;
  }
  50.01% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes pulse {
  0% {
    opacity: .7;
    transform: scale(.9);
  }
}

SassMeister-output.css

@import url(http://s0.wp.com/_static/??-eJydktluAjEMRX+oIV0A0Yeq35LFJAZnUZZB/ftmAhQoVVr1aWznnujmjvkhMvSKqobMVc5ci2xRBZ8XDv2iTR74d4nQ7YhJkW4kjSngC49UDfrMiwUHzIGvHbq0d4Sr7AzlKrNKGAs2B3wbiMJhpLdhgsRklZKauVw+CEZy9IQeWIHkMq/4O0C4b/fuoESh9qx3I/lXMu1cBccuSQ0gFRK0uYuizAoHGgVQS8uXEebi+kzNpW0G77311JuvjeIGPKT+Z38u/8heRYbch3KcnouR4aaBq4jY9DxSGwiMghLzJtw0bEsCh4EmkBRMK03fvEs7gmLI5Xg1z1akGT59xy7/F6pdckNBChpuk7IIU1+EzA+oDZRhwCdJf7QJQScQugPv7u1p+bh63ayW65fdJ7Fce8Y=);
*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  padding: 5%;
  text-align: center;
}

div {
  margin: 15px 0;
}

.button-primary, .button-secondary, .button-download, .button-twitter, .button-fuck-yeah {
  display: inline-block;
  margin: 0;
  padding: 0.538em 0.769em;
  border-width: 1px;
  border-style: solid;
  border-radius: 0.230em;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
}

.button-primary {
  background: #00aadc;
  border-color: #0083a9;
  color: white;
}
.button-primary:hover, .button-primary:focus {
  background: #0096c3;
  border-color: #006f90;
  color: white;
}
.button-primary:active {
  background: #0083a9;
  border-color: #006f90;
  color: white;
}
.button-primary[disabled], .button-primary:disabled {
  color: #c7cfd1 !important;
  background: #008ab3 !important;
  border-color: #006f90 !important;
}
.button-primary:visited {
  color: white;
}

.button-secondary {
  background: #eeeeee;
  border-color: #d4d4d4;
  color: #444444;
}
.button-secondary:hover, .button-secondary:focus {
  background: #e1e1e1;
  border-color: #c8c8c8;
  color: #444444;
}
.button-secondary:active {
  background: #d4d4d4;
  border-color: #c8c8c8;
  color: #444444;
}
.button-secondary[disabled], .button-secondary:disabled {
  color: #d1c7c7 !important;
  background: #dadada !important;
  border-color: #c8c8c8 !important;
}
.button-secondary:visited {
  color: #444444;
}

.button-download {
  background: green;
  border-color: #004d00;
  color: white;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-indent: -9999px;
  text-align: left;
}
.button-download:before {
  content: false;
  display: inline-block;
  margin: 4px 0 0 9px;
  font-family: 'Genericons';
  font-size: 1.538em;
  vertical-align: middle;
  position: absolute;
  width: 40px;
  top: 0;
  left: 9999px;
  width: 100%;
  height: 100%;
}
.button-download:hover, .button-download:focus {
  background: #006700;
  border-color: #003400;
  color: white;
}
.button-download:active {
  background: #004d00;
  border-color: #003400;
  color: white;
}
.button-download[disabled], .button-download:disabled {
  color: #c7d1c7 !important;
  background: #005700 !important;
  border-color: #003400 !important;
}
.button-download:visited {
  color: white;
}

.button-twitter {
  background: #55acee;
  border-color: #2795e9;
  color: white;
}
.button-twitter:before {
  content: "\f202";
  display: inline-block;
  margin-top: -5px;
  margin-right: 10px;
  font-family: 'Genericons';
  font-size: 1.538em;
  line-height: 0;
  vertical-align: middle;
}
.button-twitter:hover, .button-twitter:focus {
  background: #3ea1ec;
  border-color: #1689e0;
  color: white;
}
.button-twitter:active {
  background: #2795e9;
  border-color: #1689e0;
  color: white;
}
.button-twitter[disabled], .button-twitter:disabled {
  color: #c7cdd1 !important;
  background: #309aea !important;
  border-color: #1689e0 !important;
}
.button-twitter:visited {
  color: white;
}

.button-fuck-yeah {
  background: blue;
  border-color: #0000cc;
  color: white;
  font-size: 2em;
  animation: pulse .5s ease-in infinite alternate;
}
.button-fuck-yeah:before {
  content: "\f444";
  display: inline-block;
  margin-top: -5px;
  margin-right: 10px;
  font-family: 'Genericons';
  font-size: 1.538em;
  line-height: 0;
  vertical-align: middle;
}
.button-fuck-yeah:hover, .button-fuck-yeah:focus {
  background: #0000e6;
  border-color: #0000b3;
  color: white;
}
.button-fuck-yeah:active {
  background: #0000cc;
  border-color: #0000b3;
  color: white;
}
.button-fuck-yeah[disabled], .button-fuck-yeah:disabled {
  color: #c7c7d1 !important;
  background: #0000d6 !important;
  border-color: #0000b3 !important;
}
.button-fuck-yeah:visited {
  color: white;
}

@keyframes blink {
  50% {
    opacity: 1;
  }

  50.01% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}
@keyframes pulse {
  0% {
    opacity: .7;
    transform: scale(0.9);
  }
}