SASS: sys-button component.

gistfile1.sass

// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

// SYSTEM BUTTON
////////////////////////////////////////////////////////////////////

// VARIABLES
////////////////////////////////////
// Padding for buttons.
$sys-button-tny: rem-calc(2) !default;
$sys-button-sml: rem-calc(5) !default;
$sys-button-med: rem-calc(11) !default;
$sys-button-lrg: rem-calc(15) !default;

// Display property.
$sys-button-display: inline-block !default;
$sys-button-margin: 0 !default;

// Button text styles.
$sys-button-font-family: $global-font-family-A !default;
$sys-button-font-color: #fff !default;
$sys-button-font-color-alt: #333 !default;
$sys-button-font-tny: rem-calc(10) !default;
$sys-button-font-sml: rem-calc(12) !default;
$sys-button-font-med: rem-calc(16) !default;
$sys-button-font-lrg: rem-calc(18) !default;
$sys-button-font-weight: normal !default;
$sys-button-font-align: center !default;

// Button hover effects.
$sys-button-function-factor: -15% !default;

// Button border and hover styles.
$sys-button-border-width: 0 !default;
$sys-button-border-style: solid !default;

// Ghost Button
$sys-button-ghost-border-width: 2px !default;
$sys-button-ghost-border-style: solid !default;

$sys-button-bg-color: #f77307 !default;
$sys-button-bg-hover: scale-color($sys-button-bg-color, $lightness: $sys-button-function-factor) !default;
$sys-button-border-color: $sys-button-bg-hover !default;

// Default == themeA
$sys-button-themeA-bg-color: #f77307 !default;
$sys-button-themeA-bg-hover: scale-color($sys-button-themeA-bg-color, $lightness: $sys-button-function-factor) !default;
$sys-button-themeA-border-color: $sys-button-themeA-bg-hover !default;

$sys-button-themeB-bg-color: #858585 !default;
$sys-button-themeB-bg-hover: scale-color($sys-button-themeB-bg-color, $lightness: $sys-button-function-factor) !default;
$sys-button-themeB-border-color: $sys-button-themeB-bg-hover !default;

$sys-button-themeC-bg-color: #f04124 !default;
$sys-button-themeC-bg-hover: scale-color($sys-button-themeC-bg-color, $lightness: $sys-button-function-factor) !default;
$sys-button-themeC-border-color: $sys-button-themeC-bg-hover !default;

$sys-button-themeD-bg-color: #2bbfa2 !default;
$sys-button-themeD-bg-hover: scale-color($sys-button-themeD-bg-color, $lightness: $sys-button-function-factor) !default;
$sys-button-themeD-border-color: $sys-button-themeD-bg-hover !default;

$sys-button-themeE-bg-color: #259FD8 !default;
$sys-button-themeE-bg-hover: scale-color($sys-button-themeE-bg-color, $lightness: $sys-button-function-factor) !default;
$sys-button-themeE-border-color: $sys-button-themeE-bg-hover !default;

$sys-button-themeF-bg-color: #333 !default;
$sys-button-themeF-bg-hover: scale-color($sys-button-themeF-bg-color, $lightness: $sys-button-function-factor) !default;
$sys-button-themeF-border-color: $sys-button-themeF-bg-hover !default;

// We use this to set the default radius used throughout the core.
$sys-button-radius: $global-radius !default;
$sys-button-round: $global-rounded !default;

// We use this to set default opacity and cursor for disabled buttons.
$sys-button-disabled-opacity: 0.6 !default;
$sys-button-disabled-cursor: default !default;


//
// @MIXIN
//
// We use this mixin to create a default button base.
//
// $style - Sets base styles. Can be set to false. Default: true.
// $display - Used to control display property. Default: $sys-button-display || inline-block

@mixin sys-button-base($style:true, $display:$sys-button-display) {
	@if $style {
		border-style: $sys-button-border-style;
		border-width: $sys-button-border-width;
		cursor: $cursor-pointer-value;
		font-family: $sys-button-font-family;
		font-weight: $sys-button-font-weight;
		line-height: normal;
		margin: $sys-button-margin;
		position: relative;
		text-decoration: none;
		text-align: $sys-button-font-align;
		-webkit-appearance: none;
		-webkit-border-radius: 0;
		-webkit-touch-callout: none;
	}
	@if $display { display: $display; }
}

// @MIXIN
//
// We use this mixin to add button size styles
//
// $padding - Used to build padding for buttons Default: $sys-button-med ||= rem-calc(12)
// $full-width - We can set $full-width:true to remove side padding extend width - Default: false
// $ghost-options If you needn't to export "is-ghost" style, set this bloolean to false - Default:true.

@mixin sys-button-size($padding:$sys-button-med, $full-width:false, $ghost-options: true) {

	// We control which padding styles come through,
	// these can be turned off by setting $padding:false
	@if $padding {
		padding-top: $padding;
		padding-right: $padding * 2;
		padding-bottom: $padding;
		padding-left: $padding * 2;

		.touch &:not(.size-fixed) {
			padding-top: $padding * 2;
			padding-bottom: $padding * 2;
		}
		// We control the font-size based on mixin input.
		@if      $padding == $sys-button-med { font-size: $sys-button-font-med; }
		@else if $padding == $sys-button-tny { font-size: $sys-button-font-tny; }
		@else if $padding == $sys-button-sml { font-size: $sys-button-font-sml; }
		@else if $padding == $sys-button-lrg { font-size: $sys-button-font-lrg; }

		@if $ghost-options {
			&.is-ghost {
				padding-top: $padding - rem-calc($sys-button-ghost-border-width);
				padding-right: ($padding * 2)- rem-calc($sys-button-ghost-border-width);
				padding-bottom: $padding - rem-calc($sys-button-ghost-border-width);
				padding-left: ($padding * 2) - rem-calc($sys-button-ghost-border-width);
				&:hover,
				&:focus {
					padding-top: $padding;
					padding-right: $padding * 2;
					padding-bottom: $padding;
					padding-left: $padding * 2;
				}
				.touch &:not(.size-fixed) {
					padding-top: ($padding * 2) - rem-calc($sys-button-ghost-border-width);
					padding-bottom: ($padding * 2) - rem-calc($sys-button-ghost-border-width);
					&:hover,
					&:focus {
						padding-top: $padding * 2;
						padding-bottom: $padding * 2;
					}
				}
				&.disabled {
					&:hover,
					&:focus {
						padding-top: $padding - rem-calc($sys-button-ghost-border-width);
						padding-right: ($padding * 2)- rem-calc($sys-button-ghost-border-width);
						padding-bottom: $padding - rem-calc($sys-button-ghost-border-width);
						padding-left: ($padding * 2) - rem-calc($sys-button-ghost-border-width);
						.touch &:not(.size-fixed) {
							padding-top: $padding * 2;
							padding-bottom: $padding * 2;
						}
					}
				}
			}
		}
	}

	// We can set $full-width:true to remove side padding extend width.
	@if $full-width {
		// We still need to check if $padding is set.
		@if $padding {
			padding-top: $padding;
			padding-bottom: $padding + rem-calc(1);
		} @else if $padding == false {
			padding-top:0;
			padding-bottom:0;
		}
		padding-right: 0;
		padding-left: 0;
		width: 100%;
	}
}

// @MIXIN
//
// We use this mixin to add button color styles
//
// $bg - Primary color set in settings file. Default: $sys-button-bg.
// $radius - If true, set to button radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default: true
// $disabled - We can set $disabled:true to create a disabled transparent button. Default: false
// $bg-hover - Button Hover Background Color. Default: $sys-button-bg-hover
// $border-color - Button Border Color. Default: $sys-button-border-color
// $ghost-options If you needn't to export "is-ghost" style, set this bloolean to false - Default:true.
@mixin sys-button-style($bg:$sys-button-bg-color, $radius:false, $disabled:false, $bg-hover:null, $border-color:null, $overwrite-font-color:null, $ghost-options: true) {

	// We control which background styles are used,
	// these can be removed by setting $bg:false
	@if $bg {
		@if $bg-hover == null {
			$bg-hover: if($bg == $sys-button-bg-color, $sys-button-bg-hover, scale-color($bg, $lightness: $sys-button-function-factor));
		}

		// This find the lightness percentage of the background color.
		$bg-lightness: lightness($bg);
		$bg-hover-lightness: lightness($bg-hover);

		background-color: $bg;
		border-color: $border-color;
		&:hover,
		&:focus {
			background-color: $bg-hover;
			text-decoration: none;
		}
		&:active {
			@include box-shadow(inset 0 2px 3px rgba(0,0,0,.3));
			background-color: scale-color($bg-hover, $lightness: $sys-button-function-factor);
		}

		// We control the text color for you based on the background color.
		@if $overwrite-font-color == null {
			color: if($bg-lightness > 70%, $sys-button-font-color-alt, $sys-button-font-color);
		}
		@else {
			color: if($bg-lightness > 70%, $sys-button-font-color-alt, $overwrite-font-color);
		}

		&:hover,
		&:focus {
			@if $overwrite-font-color == null {
				color: if($bg-lightness > 70%, $sys-button-font-color-alt, $sys-button-font-color);
			}
			@else {
				color: if($bg-lightness > 70%, $sys-button-font-color-alt, $overwrite-font-color);
			}
			text-decoration: none;
		}

		//Ghost button(Border only button)
		@if $ghost-options {
			&.is-ghost {
				border-color: scale-color($bg, $lightness: 5%);
				background-color: transparent;
				border-width: $sys-button-ghost-border-width;
				border-style: $sys-button-ghost-border-style;
				color: $bg;
				&:hover,
				&:focus {
					background-color: $bg;
					border-width: 0;
					@if $overwrite-font-color == null {
						color: if($bg-lightness > 70%, $sys-button-font-color-alt, $sys-button-font-color);
					}
					@else {
						color: if($bg-lightness > 70%, $sys-button-font-color-alt, $overwrite-font-color);
					}
				}
				&:active {
					background-color: scale-color($bg-hover, $lightness: $sys-button-function-factor);
				}
			}
		}
	}

	// We can set $disabled:true to create a disabled transparent button.
	@if $disabled {
		cursor: $sys-button-disabled-cursor;
		opacity: $sys-button-disabled-opacity;
		box-shadow: none;
		&:hover,
		&:focus {
			background-color: $bg;
			text-decoration: none;
		}
		@if $ghost-options {
			&.is-ghost {
				&:hover,
				&:active,
				&:focus {
					background-color: transparent;
					border-width: $sys-button-ghost-border-width;
					color: $bg;
					box-shadow: none;
				}
			}
		}
	}

	// We can control how much button radius is used.
	@if $radius == true { @include radius($sys-button-radius); }
	@else if $radius { @include radius($radius); }

}

// @MIXIN
//
// We use this to quickly create buttons with a single mixin. As @jaredhardy puts it, "the kitchen sink mixin"
//
// $padding - Used to build padding for buttons Default: $sys-button-med ||= rem-calc(12)
// $bg - Primary color set in settings file. Default: $sys-button-bg.
// $overwrite-font-color -Use to overwrite default text color - see sys-button-style mixin
// $radius - If true, set to button radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default:false.
// $full-width - We can set $full-width:true to remove side padding extend width. Default:false.
// $disabled - We can set $disabled:true to create a disabled transparent button. Default:false.
// $is-prefix - Not used? Default:false.
// $bg-hover - Button Hover Color - Default null - see sys-button-style mixin
// $border-color - Button Border Color - Default null - see sys-button-style mixin
// $transition - We can control whether or not to include the background-color transition property - Default:true.
// $size-options - If you needn't to export size options(large, small...) set this bloolean to false - Default:true.
// $color-options - If you needn't to export color options(themeA, thtmeB...) set this bloolean to false - Default:true.
// $ghost-options If you needn't to export "is-ghost" style, set this bloolean to false - Default:true.
@mixin sys-button($padding:$sys-button-med, $bg:$sys-button-bg-color, $overwrite-font-color:null, $radius:true, $full-width:false, $disabled:false, $is-prefix:false, $bg-hover:null, $border-color:null, $transition: true, $size-options: true, $color-options: true, $ghost-options: true) {
	@include sys-button-base;
	@include sys-button-size($padding, $full-width, $ghost-options);
	@include sys-button-style($bg, $radius, $disabled, $bg-hover, $border-color, $overwrite-font-color, $ghost-options);

	@if $transition {
		@include transition-property(background-color);
		@include transition-duration(.08s);
	}

	@if $size-options {
		&.large  { @include sys-button-size($padding:$sys-button-lrg, $ghost-options: $ghost-options); }
		&.small  { @include sys-button-size($padding:$sys-button-sml, $ghost-options: $ghost-options); }
		&.tiny   { @include sys-button-size($padding:$sys-button-tny, $ghost-options: $ghost-options); }
		&.medium   { @include sys-button-size($padding:$sys-button-med, $ghost-options: $ghost-options); }
		&.expand { @include sys-button-size($padding:null, $full-width:true, $ghost-options: $ghost-options); }
	}

	@if $color-options {
		&.themeA { @include sys-button-style($bg:$sys-button-themeA-bg-color, $bg-hover:$sys-button-themeA-bg-hover, $border-color:$sys-button-themeA-border-color, $ghost-options: $ghost-options); }
		&.themeB { @include sys-button-style($bg:$sys-button-themeB-bg-color, $bg-hover:$sys-button-themeB-bg-hover, $border-color:$sys-button-themeB-border-color, $ghost-options: $ghost-options); }
		&.themeC { @include sys-button-style($bg:$sys-button-themeC-bg-color, $bg-hover:$sys-button-themeC-bg-hover, $border-color:$sys-button-themeC-border-color, $ghost-options: $ghost-options); }
		&.themeD { @include sys-button-style($bg:$sys-button-themeD-bg-color, $bg-hover:$sys-button-themeD-bg-hover, $border-color:$sys-button-themeD-border-color, $ghost-options: $ghost-options); }
		&.themeE { @include sys-button-style($bg:$sys-button-themeE-bg-color, $bg-hover:$sys-button-themeE-bg-hover, $border-color:$sys-button-themeE-border-color, $ghost-options: $ghost-options); }
		&.themeF { @include sys-button-style($bg:$sys-button-themeF-bg-color, $bg-hover:$sys-button-themeF-bg-hover, $border-color:$sys-button-themeF-border-color, $ghost-options: $ghost-options); }
	}

	&.disabled, &[disabled] {
		@include sys-button-style($bg:$sys-button-bg-color, $disabled:true, $bg-hover:$sys-button-bg-hover, $border-color:$sys-button-border-color, $ghost-options: $ghost-options);
		@if $color-options {
			&.themeA { @include sys-button-style($bg:$sys-button-themeA-bg-color, $disabled:true, $bg-hover:$sys-button-themeA-bg-hover, $border-color:$sys-button-themeA-border-color, $ghost-options: $ghost-options);}
			&.themeB { @include sys-button-style($bg:$sys-button-themeB-bg-color, $disabled:true, $bg-hover:$sys-button-themeB-bg-hover, $border-color:$sys-button-themeB-border-color, $ghost-options: $ghost-options);}
			&.themeC { @include sys-button-style($bg:$sys-button-themeC-bg-color, $disabled:true, $bg-hover:$sys-button-themeC-bg-hover, $border-color:$sys-button-themeC-border-color, $ghost-options: $ghost-options);}
			&.themeD { @include sys-button-style($bg:$sys-button-themeD-bg-color, $disabled:true, $bg-hover:$sys-button-themeD-bg-hover, $border-color:$sys-button-themeD-border-color, $ghost-options: $ghost-options);}
			&.themeE { @include sys-button-style($bg:$sys-button-themeE-bg-color, $disabled:true, $bg-hover:$sys-button-themeE-bg-hover, $border-color:$sys-button-themeE-border-color, $ghost-options: $ghost-options);}
			&.themeF { @include sys-button-style($bg:$sys-button-themeF-bg-color, $disabled:true, $bg-hover:$sys-button-themeF-bg-hover, $border-color:$sys-button-themeF-border-color, $ghost-options: $ghost-options);}
		}
	}

	//firefox 2px fix
	button::-moz-focus-inner { border: 0; padding: 0; }
}

Forked & arranged from Foundation Framework's _buttons.scss
https://github.com/zurb/foundation/blob/master/scss/foundation/components/_buttons.scss

Added theme-color options and ".is-ghost" mode(ghost button mode).