Custom CSS button framework for SASS

shell-buttons.scss

/**
 * Shell Buttons
 */
@mixin shellBtn-colors($color) {
	$color1: lighten($color, 15%);
	$color2: lighten($color, 5%);
	$color3: lighten($color, 10%);
	$color4: $color;
	$color5: darken($color, 10%);
	border-color: $color5;
	background: $color2; /* old browsers */
		background: -moz-linear-gradient(top, $color1 0%, $color2 1%, $color3 50%, $color4 51%, $color5 100%); /* firefox */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$color1), color-stop(1%,$color2), color-stop(50%,$color3), color-stop(51%,$color4), color-stop(100%,$color5)); /* webkit */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color4', endColorstr='$color5',GradientType=0 ); /* ie */
}

.shellBtn {
	// Default is white on black
	
	$padding: 5px 7px;
	$font-size: 13px;
	
	font-weight: bold;
	text-decoration: none;
	display: inline-block;
	text-transform: uppercase;
	color: #FFF;
	font-size: $font-size;
	line-height: $font-size;
	text-shadow: 0px -1px 1px rgba(0,0,0,0.25);
	border: 1px solid #000;
	padding: $padding;
	
	@include shellBtn-colors(#000);
	
	@include border-radius(4px);
	@include box-shadow('0px 1px 2px rgba(0,0,0,0.25), inset 0px 1px 0px rgba(255,255,255,0.25)');
	
	/* Sizes */
	&.small {
		padding: 3px 5px;
		font-size: $font-size - 2;
		line-height: $font-size - 2;
	}
	&.big {
		padding: 7px 9px;
		font-size: $font-size + 1;
		line-height: $font-size + 1;
	}
	
	/* Preloaded colors for HTML use */
	&.blue { @include shellBtn-colors(#3E9BEE); }
	&.green { @include shellBtn-colors(#82B527); }
	&.red { @include shellBtn-colors(#f85032); }
	&.purple { @include shellBtn-colors(#cb60b3); }
	&.orange { @include shellBtn-colors(#FF9E38); }
	&.white {
		@include shellBtn-colors(#F3F3F3);
		color: #000;
		text-shadow: 0px 1px 0px #FFF;
	}
}