An example of a button style that adapts to a base color using the overlay blend-mode to adjust colors for effects.

BlendedButtons.scss

$button-color: #ff6600;

%button-base {
	@include adjust-font-size-to(14px, 1.5);
	@include inline-block;
	@include border-radius(6px);
	font-weight: bold;
	padding: 3px 30px;
	position: relative;
	text-decoration: none;
	text-transform: uppercase;
}

.button {
	@extend %button-base;
	background-color: $button-color;
	@include background(
		linear-gradient(
			$button-color,
			blend-overlay(rgba($black, .25), $button-color)
		)
	);
	@if lightness($button-color) > 60 {
		@include box-shadow(
			0 -1px 0 rgba(blend-overlay(rgba($black, .5), $button-color), .5) inset,
			0 0 0 1px rgba(blend-overlay($black, $button-color), .25) inset,
			0 0 15px rgba(blend-overlay($white, $button-color), .25) inset
		);
		@include link-colors(
			blend-multiply($button-color, #666666),
			blend-multiply($button-color, #333333)
		);
		@include text-shadow(
			0 1px 0 rgba(blend-overlay($white, $button-color), .5)
		);
	} @else {
		@include box-shadow(
			0 -1px 0 rgba(blend-overlay(rgba($black, .5), $button-color), .5) inset,
			0 0 15px rgba(blend-overlay($white, $button-color), .5) inset
		);
		@include link-colors(
			$white,
			blend-screen(rgba($white, .95), $button-color)
		);
		@include text-shadow(
			0 -1px 0 rgba(blend-overlay($black, $button-color), .5)
		);
	}
	&:hover {
		@include background(
			linear-gradient(
				blend-overlay(rgba($white, .5), $button-color),
				blend-overlay(rgba($white, .5), blend-overlay(rgba($black, .25), $button-color))
			)
		);
	}
	&:active {
		@include background(linear-gradient(blend-overlay(rgba($black, .25), $button-color), $button-color));
		@include box-shadow(0 1px 1px rgba(blend-overlay($black, $button-color), .5) inset);
	}
}

.button-icon-right {
	padding-right: 66px;
	&:after {
		@include background(
			rgba(blend-overlay($black, $button-color), .25)
		);
		@include box-shadow(
			1px 0 0 rgba(blend-overlay($black, $button-color), .25) inset,
			-1px 0 0 blend-overlay(rgba($white, .25), $button-color)
		);
		@include border-right-radius(6px);
		content: '';
		float: left;
		position: absolute;
		right: 0;
		height: 100%;
		top: 0;
		width: 36px;
		z-index: 99;
	}
	&:before {
		@include adjust-font-size-to(12px, 1.8, 14px);
		@include inline-block;
		float: left;
		position: absolute;
		right: 0;
		text-align: center;
		top: 0px;
		width: 36px;
		z-index: 100;
	}
}