Generated by SassMeister.com.

SassMeister-input-HTML.html

<buttton type="button" class="button-info">information</buttton>
<buttton type="button" class="button-warning">information</buttton>
<buttton type="button" class="button-danger">information</buttton>
<buttton type="button" class="button-success">information</buttton>
<buttton type="button" class="button">information</buttton>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

%button-defaults {
  position: relative;
  display: inline-block;
  margin-bottom: 8px;
  padding: 8px 20px;
  text-transform: uppercase;
  font-weight: 700;
  &:hover {
    text-decoration: none;
  }
}

@mixin create-button($class, $color) {
  .#{$class} {
    @extend %button-defaults;    
    background: $color;
    color: darken($color, 40%) !important;
    border: 1px solid darken($color, 20%);
    &:hover {
      background: darken($color, 10%);
    }
    &:active {
      background: darken($color, 20%);
    }
  }
}

// https://github.com/mrmrs/colors
$aqua:  #7FDBFF !default;
$blue:  #0074D9 !default;
$navy:  #001F3F !default;
$teal:  #39CCCC !default;
$green: #2ECC40 !default;
$olive: #3D9970 !default;
$lime:  #01FF70 !default;

$yellow:  #FFDC00 !default;
$orange:  #FF851B !default;
$red:     #FF4136 !default;
$fuchsia: #F012BE !default;
$purple:  #B10DC9 !default;
$maroon:  #85144B !default;

$white:  #fff !default;
$silver: #ddd !default;
$gray:   #aaa !default;
$black:  #111 !default;

@include create-button('button-info', $aqua);
@include create-button('button-success', $green);
@include create-button('button-warning', $yellow);
@include create-button('button-danger', $red);
@include create-button('button', $gray);

SassMeister-output.css

.button-info, .button-success, .button-warning, .button-danger, .button {
  position: relative;
  display: inline-block;
  margin-bottom: 8px;
  padding: 8px 20px;
  text-transform: uppercase;
  font-weight: 700;
}

.button-info:hover, .button-success:hover, .button-warning:hover, .button-danger:hover, .button:hover {
  text-decoration: none;
}

.button-info {
  background: #7FDBFF;
  color: #0080b2 !important;
  border: 1px solid #19beff;
}

.button-info:hover {
  background: #4ccdff;
}

.button-info:active {
  background: #19beff;
}

.button-success {
  background: #2ECC40;
  color: #08260c !important;
  border: 1px solid #1b7926;
}

.button-success:hover {
  background: #25a233;
}

.button-success:active {
  background: #1b7926;
}

.button-warning {
  background: #FFDC00;
  color: #332c00 !important;
  border: 1px solid #998400;
}

.button-warning:hover {
  background: #ccb000;
}

.button-warning:active {
  background: #998400;
}

.button-danger {
  background: #FF4136;
  color: #690600 !important;
  border: 1px solid #cf0b00;
}

.button-danger:hover {
  background: #ff1103;
}

.button-danger:active {
  background: #cf0b00;
}

.button {
  background: #aaa;
  color: #444444 !important;
  border: 1px solid #777777;
}

.button:hover {
  background: #909090;
}

.button:active {
  background: #777777;
}

SassMeister-rendered.html

<buttton type="button" class="button-info">information</buttton>
<buttton type="button" class="button-warning">information</buttton>
<buttton type="button" class="button-danger">information</buttton>
<buttton type="button" class="button-success">information</buttton>
<buttton type="button" class="button">information</buttton>