Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="demo">
  <p>Standard</p>
  <button class="button">Button</button>
  <a href="#" class="button">Anchor tag</a>
  <input type="submit" class="button" value="Submit input">
  <input type="button" class="button" value="Button input">
</div> <!-- .demo -->
<br> 
<div class="demo">
  <p>Primary</p>
  <button class="button-primary">Button</button>
  <a href="#" class="button-primary">Anchor tag</a>
  <input type="submit" class="button-primary" value="Submit input">
  <input type="button" class="button-primary" value="Button input">
</div> <!-- .demo -->
<br> 
<div class="demo">
  <p>Small</p>
  <button class="button-small">Button</button>
  <a href="#" class="button-small">Anchor tag</a>
  <input type="submit" class="button-small" value="Submit input">
  <input type="button" class="button-small" value="Button input">
</div>
<br> 
<div class="demo">
  <p>Large</p>
  <button class="button-large">Button</button>
  <a href="#" class="button-large">Anchor tag</a>
  <input type="submit" class="button-large" value="Submit input">
  <input type="button" class="button-large" value="Button input">
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

// Settings
$base-unit: 'em';
$button-roundness: 0.236#{$base-unit};
$button-small-font-size: 0.75#{$base-unit};
$button-large-font-size: 1.5#{$base-unit};
$button-default-bg: #bbb;
$button-default-text-color: #333;
$button-primary-bg: #0078E7;
$button-primary-text-color: lighten($button-primary-bg, 50%);

/*
 * Buttons 
 */

.button-static {
	display: inline-block;
	padding: 0.318em 1em;
	border: 0;
	border-radius: $button-roundness;
	text-decoration: none;
	font-family: inherit;
	line-height: 1;
	cursor: pointer;

	&:focus {
		outline: none;	
	}
}

@mixin button($background-color, $text-color) {
	background-color: $background-color;
	color: $text-color;

	&:hover {
		background-color: darken($background-color, 15%);
		color: $text-color;
	}

	&:active {
		background-color: darken($background-color, 12%);
	}
}

button,
.button,
a.button {
	@extend .button-static;
	
	font-size: 1em;
	
	@include button($button-default-bg, $button-default-text-color);
}


a.button-primary,
.button-primary {
	@extend .button;
  
  font-size: 1em;
  
	@include button($button-primary-bg, $button-primary-text-color);
}

a.button-small,
.button-small {
	@extend .button;

	font-size: $button-small-font-size;
}

a.button-large,
.button-large {
	@extend .button;

	font-size: $button-large-font-size;
}

SassMeister-output.css

/*
 * Buttons 
 */
.button-static, button,
.button,
a.button-primary,
.button-primary,
a.button-small,
.button-small,
a.button-large,
.button-large,
a.button {
  display: inline-block;
  padding: 0.318em 1em;
  border: 0;
  border-radius: 0.236em;
  text-decoration: none;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
}
.button-static:focus, button:focus,
.button:focus,
.button-primary:focus,
.button-small:focus,
.button-large:focus {
  outline: none;
}

button,
.button,
a.button-primary,
.button-primary,
a.button-small,
.button-small,
a.button-large,
.button-large,
a.button,
a.button-primary,
a.button-small,
a.button-large {
  font-size: 1em;
  background-color: #bbb;
  color: #333;
}
button:hover,
.button:hover,
.button-primary:hover,
.button-small:hover,
.button-large:hover,
a.button:hover,
a.button-primary:hover,
a.button-small:hover,
a.button-large:hover {
  background-color: #959595;
  color: #333;
}
button:active,
.button:active,
.button-primary:active,
.button-small:active,
.button-large:active,
a.button:active,
a.button-primary:active,
a.button-small:active,
a.button-large:active {
  background-color: #9c9c9c;
}

a.button-primary,
.button-primary {
  font-size: 1em;
  background-color: #0078E7;
  color: #e7f3ff;
}
a.button-primary:hover,
.button-primary:hover {
  background-color: #00509b;
  color: #e7f3ff;
}
a.button-primary:active,
.button-primary:active {
  background-color: #0058aa;
}

a.button-small,
.button-small {
  font-size: 0.75em;
}

a.button-large,
.button-large {
  font-size: 1.5em;
}

SassMeister-rendered.html

<div class="demo">
  <p>Standard</p>
  <button class="button">Button</button>
  <a href="#" class="button">Anchor tag</a>
  <input type="submit" class="button" value="Submit input">
  <input type="button" class="button" value="Button input">
</div> <!-- .demo -->
<br> 
<div class="demo">
  <p>Primary</p>
  <button class="button-primary">Button</button>
  <a href="#" class="button-primary">Anchor tag</a>
  <input type="submit" class="button-primary" value="Submit input">
  <input type="button" class="button-primary" value="Button input">
</div> <!-- .demo -->
<br> 
<div class="demo">
  <p>Small</p>
  <button class="button-small">Button</button>
  <a href="#" class="button-small">Anchor tag</a>
  <input type="submit" class="button-small" value="Submit input">
  <input type="button" class="button-small" value="Button input">
</div>
<br> 
<div class="demo">
  <p>Large</p>
  <button class="button-large">Button</button>
  <a href="#" class="button-large">Anchor tag</a>
  <input type="submit" class="button-large" value="Submit input">
  <input type="button" class="button-large" value="Button input">
</div>