Cacher is the code snippet organizer for pro developers

<button class="button-badass">Badass Button</button>
<button class="button-coffee">Coffee Button</button>
<button class="button-decaff">Decaff Button</button>

.button-badass {
  background-color: #b4d455;
  border-color: #879f40;
}

.button-badass .button-badass, .button-badass .button-coffee, .button-badass .button-decaff {
  border: 1px solid;
  border-radius: 5px;
  padding: 0.25em 0.5em;
}

.button-badass .button-badass:hover, .button-badass .button-coffee:hover, .button-badass .button-decaff:hover {
  cursor: pointer;
}

.button-badass:hover {
  background-color: #99b448;
  border-color: #6c7f33;
}

.button-coffee {
  background-color: #c0ffee;
  border-color: #90bfb3;
}

.button-coffee:hover {
  background-color: #a3d9ca;
  border-color: #73998f;
}

.button-decaff {
  background-color: #decaff;
  border-color: #a798bf;
}

.button-decaff:hover {
  background-color: #bdacd9;
  border-color: #857999;
}

// ----
// libsass (v3.2.5)
// ----

$Placeholder-Selectors: ();

@mixin button($color, $extend: true) {
	@include button-static($extend);
	
	background-color: $color;
	border-color: mix(black, $color, 25%);
	
	&:hover {
		background-color: mix(black, $color, 15%);
		border-color: mix(black, $color, 40%);
	}
}

@mixin button-static($extend: true) {
	$button-selector: map-get($Placeholder-Selectors, 'button');
	
	@if $extend == true {
		@if $button-selector == null {
			$button-selector: unique-id();
			$Placeholder-Selectors: map-merge($Placeholder-Selectors, ('button': $button-selector)) !global;
			
			@at-root %#{$button-selector} {
				@include button-static(false);
			}
		}
		@extend %#{$button-selector};
		}
		@else {
		border: 1px solid;
		border-radius: 5px;
		padding: .25em .5em;
		
		&:hover {
			cursor: pointer;
		}
	}
}

.button-badass {
	@include button(#b4d455);
}

.button-coffee {
	@include button(#c0ffee);
}

.button-decaff {
	@include button(#decaff);
}

<button class="button-badass">Badass Button</button>
<button class="button-coffee">Coffee Button</button>
<button class="button-decaff">Decaff Button</button>