Generated by SassMeister.com.

SassMeister-input.scss

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

$font-bold: Verdana;
$font-book: Arial;
$default                    : null;

$white                      : #ffffff !default;
$black                      : #000000 !default;

$purple                     : #660099 !default;
$purple-hover               : #7744AA !default; 
$purple-dark                : #500078 !default;

$orange                     : #ff9900 !default;
$orange-hover               : #ffb533 !default;
$orange-dark                : #ff8020 !default;

$blue                       : #0066cc !default;
$blue-hover                 : #0088dd !default;
$blue-dark                  : #0055ab !default;

$green                      : #99cc33 !default;
$green-hover                : #bbdd55 !default;
$green-dark                	: #66bb33 !default;

$pink                      	: #ee3377 !default;
$pink-hover                	: #f06699 !default;
$pink-dark                	: #cc1155 !default;


$gray-base                  : #333333 !default;
$gray-base-1                : #222222 !default;
$gray-base-2                : #666666 !default; 
$gray-base-3                : #999999 !default;
$gray-base-4                : #b9b9b9 !default;
$gray-base-5                : #cccccc !default;
$gray-base-6                : #e3e3e3 !default;
$gray-base-7                : #f1f2f3 !default;
$gray-base-8                : #aaaaaa !default;
$gray-base-9                : #f0f0f0 !default;

@mixin font-size( $sizeFont: $fonte-tamanho-base, $sizeLine: ($fonte-tamanho-base * $linha-altura-base) ) {
	font-size: $sizeFont + rem;
	line-height: $sizeLine + rem;
}


.btn-base{
	font-family: $font-bold;
 	border-radius: 2px;
 	display: inline-block;
 	cursor: pointer;
 	text-align: center;
	white-space: nowrap;
	outline: none;
}

@mixin btn-style($bg, $bdr, $color, $bg-hover: $default, $bdr-hover: $default, $color-hover: $default, $icon: $default, $outline: $default) {
	@extend .btn-base;
	background: $bg;
	border: 1px solid $bdr;
	color: $color;
	&:hover,
	&:active,
	&.active {
		transition: all 0.3s ease;
		@if $outline == true {
			@if $bg-hover {
				background: $bg-hover;
				border: 1px solid $bdr-hover;
				color: $color-hover;

			} @else {
				background: $bdr;
				color: $white;
			}
		} @else {
			background: lighten($bg, 6%);
			border: 1px solid lighten($bdr, 6%);
			color: lighten($color, 6%);
		}
	}

	@if $icon == true {
		.icon-btn-left{
			height: 13px;
			width: 20px;
			float: left;
			position: relative;
			margin-top: -5px;
			& svg{
				position: absolute;
				top: -2px;
				left: -10px;
				height: 2.4rem;
				width: 2.4rem;
				fill: $color;
			}
		}
	}
}

.btn {
	// 	Style Buttons
	&-primary {
		@include btn-style($purple, $purple, $white);
	}
	&-secondary {
		@include btn-style($blue, $blue, $white);
	}
	&-tertiary {
		@include btn-style($orange, $orange, $white);
	}
	&-quaternary {
		@include btn-style(transparent, $purple, $purple, $outline: true);
	}
	&-quinary {
		@include btn-style(transparent, $orange, $orange, $outline: true);
	}
	&-senary {
		@include btn-style(transparent, $blue, $blue, $outline: true);
	}
	&-septenary {
		@include btn-style(transparent, $gray-base-3, $gray-base-3, transparent, $purple-hover, $purple-hover, $outline: true);
	}
	&-octonary {
		@include btn-style(transparent, $purple, $purple, transparent, $purple-hover, $purple-hover, $outline: true);
	}
	&-nonary {
		@include btn-style(transparent, $gray-base-3, $gray-base-3, transparent, $gray-base-2, $gray-base-2, $outline: true);
	}
	&-denary {
		@include btn-style($purple, $purple, $white, $white, $white, $purple, $outline: true);
	}
	&-icon {
		@include btn-style($purple, $purple, $white, true);
	}

	// 	Size Buttons 
	&-large {
		@include font-size(1.8, 1);
		padding: 18px 19px;
	}	
	&-medium {
		@include font-size(1.6, 1);
		padding: 14px 17px;
	}	
	&-small {
		@include font-size(1.4, 1);
		padding: 10px 15px;
	}	
	&-xsmall {
		@include font-size(1.4, 1);
		padding: 6px 13px;
		font-family: $font-book;
	}
}

SassMeister-output.css

.btn-base, .btn-primary, .btn-secondary, .btn-tertiary, .btn-quaternary, .btn-quinary, .btn-senary, .btn-septenary, .btn-octonary, .btn-nonary, .btn-denary, .btn-icon {
  font-family: Verdana;
  border-radius: 2px;
  display: inline-block;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  outline: none;
}

.btn-primary {
  background: #660099;
  border: 1px solid #660099;
  color: #ffffff;
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active {
  transition: all 0.3s ease;
  background: #7a00b8;
  border: 1px solid #7a00b8;
  color: white;
}
.btn-secondary {
  background: #0066cc;
  border: 1px solid #0066cc;
  color: #ffffff;
}
.btn-secondary:hover, .btn-secondary:active, .btn-secondary.active {
  transition: all 0.3s ease;
  background: #0075eb;
  border: 1px solid #0075eb;
  color: white;
}
.btn-tertiary {
  background: #ff9900;
  border: 1px solid #ff9900;
  color: #ffffff;
}
.btn-tertiary:hover, .btn-tertiary:active, .btn-tertiary.active {
  transition: all 0.3s ease;
  background: #ffa51f;
  border: 1px solid #ffa51f;
  color: white;
}
.btn-quaternary {
  background: transparent;
  border: 1px solid #660099;
  color: #660099;
}
.btn-quaternary:hover, .btn-quaternary:active, .btn-quaternary.active {
  transition: all 0.3s ease;
  background: #660099;
  color: #ffffff;
}
.btn-quinary {
  background: transparent;
  border: 1px solid #ff9900;
  color: #ff9900;
}
.btn-quinary:hover, .btn-quinary:active, .btn-quinary.active {
  transition: all 0.3s ease;
  background: #ff9900;
  color: #ffffff;
}
.btn-senary {
  background: transparent;
  border: 1px solid #0066cc;
  color: #0066cc;
}
.btn-senary:hover, .btn-senary:active, .btn-senary.active {
  transition: all 0.3s ease;
  background: #0066cc;
  color: #ffffff;
}
.btn-septenary {
  background: transparent;
  border: 1px solid #999999;
  color: #999999;
}
.btn-septenary:hover, .btn-septenary:active, .btn-septenary.active {
  transition: all 0.3s ease;
  background: transparent;
  border: 1px solid #7744AA;
  color: #7744AA;
}
.btn-octonary {
  background: transparent;
  border: 1px solid #660099;
  color: #660099;
}
.btn-octonary:hover, .btn-octonary:active, .btn-octonary.active {
  transition: all 0.3s ease;
  background: transparent;
  border: 1px solid #7744AA;
  color: #7744AA;
}
.btn-nonary {
  background: transparent;
  border: 1px solid #999999;
  color: #999999;
}
.btn-nonary:hover, .btn-nonary:active, .btn-nonary.active {
  transition: all 0.3s ease;
  background: transparent;
  border: 1px solid #666666;
  color: #666666;
}
.btn-denary {
  background: #660099;
  border: 1px solid #660099;
  color: #ffffff;
}
.btn-denary:hover, .btn-denary:active, .btn-denary.active {
  transition: all 0.3s ease;
  background: #ffffff;
  border: 1px solid #ffffff;
  color: #660099;
}
.btn-icon {
  background: #660099;
  border: 1px solid #660099;
  color: #ffffff;
}
.btn-icon:hover, .btn-icon:active, .btn-icon.active {
  transition: all 0.3s ease;
  background: #7a00b8;
  border: 1px solid #7a00b8;
  color: white;
}
.btn-large {
  font-size: 1.8rem;
  line-height: 1rem;
  padding: 18px 19px;
}
.btn-medium {
  font-size: 1.6rem;
  line-height: 1rem;
  padding: 14px 17px;
}
.btn-small {
  font-size: 1.4rem;
  line-height: 1rem;
  padding: 10px 15px;
}
.btn-xsmall {
  font-size: 1.4rem;
  line-height: 1rem;
  padding: 6px 13px;
  font-family: Arial;
}