CodePen Embed - Button library

<h3>SCSS button gallery</h3>
<div class="wrap">
	<button class="flat-btn">Button</button>
	<button class="flat-btn blue">Blue button</button>
	<button class="flat-btn green">Green button</button>
	<button class="flat-btn red">Red button</button>
	<br><br>
	<button class="pebble-btn">button</button>
	<button class="pebble-btn blue">blue button</button>
	<button class="pebble-btn green">green button</button>
	<button class="pebble-btn red">red button</button>
	<br><br>
	<button class="topshadow-btn">button</button>
	<button class="topshadow-btn blue">blue button</button>
	<button class="topshadow-btn green">green button</button>
	<button class="topshadow-btn red">red button</button> 
	<br><br>
	<button class="lineshadow-btn">Button</button>
	<button class="lineshadow-btn blue">Blue button</button>
	<button class="lineshadow-btn green">Green button</button>
	<button class="lineshadow-btn red">Red button</button>
	<br><br>
	<button class="clear-btn">Button</button>
	<button class="clear-btn blue">Blue button</button>
	<button class="clear-btn green">Green button</button>
	<button class="clear-btn red">Red button</button>
	<br><br>
	<button class="gradient-btn">Button</button>
	<button class="gradient-btn blue">Blue button</button>
	<button class="gradient-btn green">Green button</button>
	<button class="gradient-btn red">Red button</button>
	<br><br>
	<button class="round-btn">Button</button>
	<button class="round-btn blue">Blue button</button>
	<button class="round-btn green">Green button</button>
	<button class="round-btn red">Red button</button>
	<br><br>
	<button class="sharp-btn">Button</button>
	<button class="sharp-btn blue">Blue button</button>
	<button class="sharp-btn green">Green button</button>
	<button class="sharp-btn red">Red button</button>
	<br><br>
	<button class="shrink-btn">Button</button>
	<button class="shrink-btn blue">Blue button</button>
	<button class="shrink-btn green">Green button</button>
	<button class="shrink-btn red">Red button</button>
	<br><br>
	<button class="glitch-btn">Button</button>
	<button class="glitch-btn blue">Blue button</button>
	<button class="glitch-btn green">Green button</button>
	<button class="glitch-btn red">Red button</button>
	<br><br>
	<button class="lefttop-btn">button</button>
	<button class="lefttop-btn blue">blue button</button>
	<button class="lefttop-btn green">green button</button>
	<button class="lefttop-btn red">red button</button>
	<br><br>
	<button class="picross-btn">Button</button>
	<button class="picross-btn blue">Blue button</button>
	<button class="picross-btn green">Green button</button>
	<button class="picross-btn red">Red button</button>
	<br><br>
	<button class="classic-btn">Button</button>
	<button class="classic-btn blue">Blue button</button>
	<button class="classic-btn green">Green button</button>
	<button class="classic-btn red">Red button</button>
	<br><br>
	<button class="simple-btn">Button</button>
	<button class="simple-btn blue">Blue button</button>
	<button class="simple-btn green">Green button</button>
	<button class="simple-btn red">Red button</button>
	<br><br>
	<button class="threed-btn">Button</button>
	<button class="threed-btn blue">Blue button</button>
	<button class="threed-btn green">Green button</button>
	<button class="threed-btn red">Red button</button>
	<br><br>
</div>

@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700|Oswald);
 
// vars 
$gray: #777;
$blue: #07d;
$green: #0b6;
$red: #b21;
$font-stack: 'Lato', sans-serif; 
$background: #f4f4f4; // url(https://subtlepatterns.com/patterns/square_bg.png); 

button {
	cursor: pointer;
	border: none;
	outline: none; 
}


// 1: flat
@mixin flat-btn($color, $bottom-darken, $hover-lighten) {
	background: $color;
	@include box-shadow(0 4px 0 darken($color, $bottom-darken));
	&:hover {
		background: lighten($color, $hover-lighten);
	}
}
.flat-btn {
	padding: 10px 22px;
	font: 300 1.2em $font-stack;
	color: #fff;
	text-shadow: 0 1px 1px rgba(#fff, .2);
	@include border-radius(6px);
	@include flat-btn($gray, 14%, 5.6%);
	
	&.blue { @include flat-btn($blue, 13%, 5%); }
	&.green { @include flat-btn($green, 10%, 4%); }
	&.red { @include flat-btn($red, 12%, 5.2%); }
	
	&:active {
		@include box-shadow(none);
		@include transform(translateY(4px));
	}
}

// 2: pebble
$pebble-shadow-size: 6px;
@mixin pebble-btn($size, $color, $click-lighten) {
	background: $color;
	@include box-shadow(0 $size 0 0 rgba($color, .5),
											0 (-$size) 0 0 rgba($color, .5),
											$size 0 0 0 rgba($color, .5),
											(-$size) 0 0 0 rgba($color, .5));
	&:hover {
		@include box-shadow(0 0 0 0 $color);
	}
	&:active {
		background: lighten($color, $click-lighten);
		@include box-shadow(inset 0 0 8px rgba($color, .4));
	}
}
.pebble-btn {
	padding: 10px 18px;
	margin: $pebble-shadow-size;
	position: relative;
	font: 700 1.2em $font-stack;
	color: #fff;
	@include transition(box-shadow .3s linear, background-color .16s linear);
	@include pebble-btn($pebble-shadow-size, $gray, 12%);
	
	&.blue { @include pebble-btn($pebble-shadow-size, $blue, 12%); }
	&.green { @include pebble-btn($pebble-shadow-size, $green, 6%); }
	&.red { @include pebble-btn($pebble-shadow-size, $red, 12%); }
}

// 3: topshadow
@mixin topshadow-btn($color, $darken, $border-darken) {
	background: darken($color, $darken);
	border: 1px solid darken($color, $border-darken);
}
.topshadow-btn {
	padding: 12px 20px;
	font: 400 1em $font-stack;
	text-transform: uppercase;
	color: #fff;
	@include border-radius(4px);
	@include transition(.3s ease-out);
	@include box-shadow(inset 0 1px 0 rgba(#fff, .3),
											inset 0 2px 8px rgba(#222, .1));
	&:hover {
		@include box-shadow(inset 0 1px 0 rgba(#fff, .34),
												inset 0 9px 13px rgba(#fff, .26));
	}
	&:active {
		@include box-shadow(inset 0 1px 0 rgba(#fff, .3), 
												inset 0 3px 9px rgba(#fff, .1));
	}
	@include topshadow-btn($gray, 0%, 16%);
	
	&.blue { @include topshadow-btn($blue, 4%, 16%); }
	&.green { @include topshadow-btn($green, 3%, 16%); }
	&.red { @include topshadow-btn($red, 0%, 12%); }
}

// 4: line shadow (in the right bottom)
@mixin lineshadow-btn($color, $darken, $lighten, $click-lighten) {
	background: $color;
	text-shadow: 2px 2px rgba(darken($color, 10), 0.6);
	border-bottom: 4px solid darken($color, $darken);
	@include box-shadow(0 0 0 2px $background, 2px 2px 0 2px lighten($color, $lighten));
	&:hover {
		@include box-shadow(0 0 0 2px $background, 0 0 0 4px darken($color, $darken));
	}
	&:active {
		background: lighten($color, $click-lighten); 
	}
}
.lineshadow-btn {
	padding: 10px 24px;
	margin-right: 5px;
	font: 700 1.2em $font-stack;
	color: #fff;
	@include border-radius(5px);	
	@include transition(box-shadow 0.2s, background 0.1s);
	@include lineshadow-btn($gray, 10%, 15%, 3.1%);
	
	&.blue { @include lineshadow-btn($blue, 9.5%, 17%, 3%); }
	&.green { @include lineshadow-btn($green, 7%, 14%, 2%); }
	&.red { @include lineshadow-btn($red, 9%, 18%, 3.8%); }
}

// 5: clear
@mixin clear-btn($color, $darken, $click-darken) {
	color: darken($color, $darken);
	border: 2px solid darken($color, $darken);
	&:hover {
		color: #fff;
		background: darken($color, $darken);
	}
	&:active {
		background: darken($color, $click-darken);
		border: 2px solid darken($color, $click-darken);
	}
}
.clear-btn {
	padding: 11px 26px;
	font: 400 1.1em $font-stack;
	background: transparent;
	@include transition(.38s);
	@include clear-btn($gray, 0%, 8%);
	
	&.blue { @include clear-btn($blue, 2%, 8%); }
	&.green { @include clear-btn($green, 3%, 8%); }
	&.red { @include clear-btn($red, 0%, 6%); }
}

// 6: gradient
@mixin gradient-btn($color, $lighten, $shadow-darken, $hover-darken) {
	background: $color;
	@include background(linear-gradient(lighten($color, $lighten), $color));
	@include box-shadow(0 2px 0 darken($color, $shadow-darken));
	&:hover {
		background: darken($color, $hover-darken);
		@include background(
			linear-gradient(darken(lighten($color, $lighten), $hover-darken), 
											darken($color, $hover-darken)));
	}
	&:active {
		@include background(
			linear-gradient(darken($color, $hover-darken), 
											darken(lighten($color, $lighten), $hover-darken)));
	}
}
.gradient-btn {
	padding: 14px 32px;
	font: 400 1em $font-stack;
	color: #fff;
	text-shadow: 0 1px 2px rgba(#000, .6);
	@include border-radius(3px);
	@include gradient-btn(lighten($gray, 2%), 13%, 13.3%, 6%);
	
	&.blue { @include gradient-btn($blue, 13%, 12%, 5%); }
	&.green { @include gradient-btn($green, 10%, 10%, 4%); }
	&.red { @include gradient-btn(lighten($red, 2%), 14%, 13.8%, 5%); }
}

// 7: round
@mixin round-btn($color, $darken) {
	background-color: $color;
	@include background(
		linear-gradient($color 42%, darken($color, $darken) 58%));
}
.round-btn {
	padding: 15px 27px;
	font: 700 .9em $font-stack;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 1px 2px rgba(#000, .3);
	@include border-radius(32px);
	@include transition(.16s);
	@include round-btn($gray, 9%);
	
	&.blue { @include round-btn($blue, 9%); }
	&.green { @include round-btn($green, 8%); }
	&.red { @include round-btn(lighten($red, 4%), 8.8%); }
	
	&:hover {
		@include box-shadow(inset 0 0 14px rgba(#000, .33));
	}
	&:active {
		@include box-shadow(inset 0 0 9px rgba(#000, .1));
	}
}

// 8: sharp
@mixin sharp-btn($color) {
	background: $color;
	border-color: darken($color, 5) darken($color, 15)
								darken($color, 15) darken($color, 5);
	@include background(
		linear-gradient($color 50%, darken($color, 7) 50%));
	&:hover {
		@include background(
			linear-gradient(darken($color, 3) 50%, darken($color, 10) 50%));
	}
}
.sharp-btn {
	padding: 12px 22px;
	font: 400 1.1em $font-stack;
	color: #fff;
	text-shadow: 0 -1px 1px rgba(#000, .6);
	border-style: solid;
	border-width: 2px;
	@include box-shadow(inset 4px 4px 6px -4px rgba(#fff, .4));
	@include sharp-btn($gray);
	
	&.blue { @include sharp-btn($blue); }
	&.green { @include sharp-btn($green); }
	&.red { @include sharp-btn(lighten($red, 6%)); }
	
	&:active {
		@include box-shadow(4px 4px 6px -4px rgba(#000, .3),
												inset -4px -4px 6px -4px rgba(#fff, .2));
	}
}

// 9: shrink
$shrink-size: 4px;
@mixin shrink-btn($color, $lighten, $darken-shadow) {
	background: lighten($color, $lighten);
	&:hover {
		@include box-shadow(0 0 0 $shrink-size 
												darken($color, $darken-shadow));
	}
}
.shrink-btn {
	padding: 12px 21px;
	font: 300 1em $font-stack;
	text-transform: uppercase;
	color: #fff;
  margin: $shrink-size;
	
	@include transition(.3s);
	@include shrink-btn($gray, 6%, 2%);
	
	&.blue { @include shrink-btn($blue, 5%, 1%); }
	&.green { @include shrink-btn($green, 3%, 3%); }
	&.red { @include shrink-btn($red, 8%, 2%); }
	&:active {
    @include transform(scale(.94));
	}
}

// 10. glitch
@mixin glitch-btn($color, $darken) {
	$color: darken($color, $darken);
	background: $color;
	@include box-shadow(0 4px 0 -2px rgba($color, .3),
							0 10px 0 -6px rgba($color, .3),
							0 12px 0 -10px rgba($color, .3),
							0 -4px 0 -2px rgba($color, .3),
							0 -10px 0 -6px rgba($color, .3),
							0 -12px 0 -10px rgba($color, .3));
	&:hover {
		box-shadow: 0 10px 0 -6px rgba($color, .3),
								0 12px 0 -10px rgba($color, .3),
								0 4px 0 -2px rgba($color, .3),
								0 -10px 0 -6px rgba($color, .3),
								0 -12px 0 -10px rgba($color, .3),
								0 -4px 0 -2px rgba($color, .3);
	}
	&:active {
		box-shadow: 4px 0 0 -2px rgba($color, .3),
								10px 0 0 -6px rgba($color, .3),
								-16px 0 0 -10px rgba($color, .3),
								-4px 0 0 -2px rgba($color, .3),
								-10px 0 0 -6px rgba($color, .3),
								16px 0 0 -10px rgba($color, .3);
	}
}
.glitch-btn {
	padding: 10px 25px;
	margin: 4px 6px;
	font: 400 1.1em $font-stack;
	letter-spacing: .3px;
	color: #fff;
	@include transition(.2s);
	@include glitch-btn($gray, 4%);
	
	&.blue { @include glitch-btn($blue, 2%); }
	&.green { @include glitch-btn($green, 5%); }
	&.red { @include glitch-btn(lighten($red, 3%), 2%); }
}


// 11: lefttop
@mixin lefttop-btn($color, $lighten, $darken) {
	background: $color;
	@include background(linear-gradient(left top, 
		darken($color, $darken) -14%, lighten($color, $lighten), $color 114%)); 
}
.lefttop-btn {
	padding: 12px 27px;
	font: 300 1.1em $font-stack;
	letter-spacing: .3px;
	color: #fff;
  text-shadow: -1px -1px 3px rgba(#000, .7);
	@include border-radius(2px);
	@include transition(.2s);
	@include box-shadow(inset 0 0 9px rgba(#000, .3));
	@include lefttop-btn($gray, 16%, 3%);
	
	&.blue { @include lefttop-btn($blue, 18%, 3%); }
	&.green { @include lefttop-btn($green, 9%, 5%); }
	&.red { @include lefttop-btn(lighten($red, 2%), 21%, 2%); }
	
	&:hover {
		@include box-shadow(none);
	}
	&:active {
		@include box-shadow(inset 0 0 6px rgba(#000, .16), 
												0 0 3px rgba(#000, .5));
	}
}

// 12: picross
$picross-shadow: 4px;
@mixin picross-btn($color, $lighten, $darken) {
	background: darken(lighten($color, $lighten), $darken);	
}
.picross-btn {
	padding: 12px 25px;
	font: 400 1.1em $font-stack;
	color: #fff;
  margin: 0 $picross-shadow $picross-shadow 0;
	@include box-shadow($picross-shadow $picross-shadow 0 #555);
	@include transition(.3s);
	@include picross-btn($gray, 6%, 0%);
	
	&.blue { @include picross-btn($blue, 5%, 0%); }
	&.green { @include picross-btn($green, 3%, 0%); }
	&.red { @include picross-btn($red, 8%, 0%); }
	
	&:hover {
		@include transform(translate($picross-shadow, $picross-shadow));
		@include box-shadow(0 0 0 #555);
	}
	&:active {
		@include box-shadow(inset 0 0 6px rgba(#000, .4));
	}
}

// 13: classic
@mixin classic-btn($color, $lighten, $border-darken) {
	background: $color;
	border-color: darken($color, $border-darken);
	@include background(
		linear-gradient(lighten($color, $lighten), $color));
	&:hover {
		@include background(
			linear-gradient(lighten($color, $lighten - 3%), darken($color, 4%)));
		border-color: darken($color, $border-darken + 12%);
	}
	&:active {
		@include background(
			linear-gradient(darken($color, 5%) -40%, darken($color, 2%)));
	}
}
.classic-btn {
	padding: 10px 24px;
	font: 400 1.1em $font-stack;
	color: #fff;
	text-shadow: 0 -1px 1px rgba(#000, .6);
	border-style: solid;
	border-width: 1px;
	@include border-radius(7px);
	@include classic-btn($gray, 18%, 10%);
	
	&.blue { @include classic-btn($blue, 18%, 10%); }
	&.green { @include classic-btn($green, 10%, 7%); }
	&.red { @include classic-btn($red, 17%, 11%); }
}


// 14: simple
@mixin simple-btn($color, $darken, $border-darken, $click-lighten) {
	background: darken($color, $darken);
	border: 1px solid darken($color, $border-darken);
	&:active {
		background: lighten(darken($color, $darken), $click-lighten);
	}
}
.simple-btn {
	padding: 12px 26px;
	font: 400 1em $font-stack;
	letter-spacing: .5px;
	color: #fff;
	@include box-shadow(inset 0 0 9px rgba(#fff, .3),
											1px 1px 3px rgba(#000, .66));
	@include simple-btn($gray, 5%, 11%, 5%);
	
	&.blue { @include simple-btn($blue, 3%, 10%, 5.2%); }
	&.green { @include simple-btn($green, 5%, 10%, 4%); }
	&.red { @include simple-btn($red, 1%, 10%, 7%); }
	
	&:hover {
		@include box-shadow(inset 0 0 9px rgba(#fff, .08),
												1px 1px 2px rgba(#000, .6));
	}
}

// 15: 3d
@mixin threed-btn($color, $lighten, $darken) {
	@include background(
		linear-gradient($color, darken($color, $darken)));
	border: 2px solid darken($color, 12%);
	
	@include box-shadow(
		inset 0 3px 4px 1px rgba(#fff, 0.22), 
		inset 0 -3px 4px 1px rgba(#000, 0.06), 
		inset 0 1px 1px rgba($color, 0.6),
		0 8px 16px 0 rgba(0, 0, 0, 0.3), 
		0 2px 4px 0 rgba(0, 0, 0, 0.3)
	);
	
	&:active {
		@include box-shadow(
			inset 0 4px 6px 0 rgba(#000, 0.36), 
			inset 0 -3px 4px 1px rgba(#fff, 0.1), 
			inset 0 1px 1px rgba($color, 0.6)
		);
	}
}
.threed-btn {
	padding: 10px 18px;
	font: 300 1.1em $font-stack;
	letter-spacing: 1px;
	color: #e4e4e4;
	text-shadow: 0 0 2px rgba(#fff, 0.1);
	@include border-radius(8px);
	@include transition(.1s);
	
	@include threed-btn($gray, 5%, 11%);
	
	&.blue { @include threed-btn($blue, 3%, 10%); }
	&.green { @include threed-btn($green, 5%, 10%); }
	&.red { @include threed-btn($red, 1%, 10%); }
	
	&:hover {
		color: #fff;
		text-shadow: 0 0 2px rgba(#fff, 0.4);
	}
}


//not btns
////////
 /////
  //
body {
	text-align: center;
	background: $background;
	padding-bottom: 42px;
}
h3 {
	font-family: 'Oswald', sans-serif;
	color: #333;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 11px;
}
@media screen and (max-width: 666px) {
	.wrap {
		width: 380px;
		margin: 0 auto;
	}
}
@media screen and (max-width: 380px) {
	.wrap {
		width: 100%;
	}
	button {
		width: 88%;
		margin: 8px auto !important;
	}
}
.flat-btn { margin: 4px 7px 8px; }
.pebble-btn { margin: ($pebble-shadow-size + 5px) ($pebble-shadow-size + 6px); }
.topshadow-btn { margin: 6px 4px; }
.lineshadow-btn { margin: 4px 5px 6px 4px; }
.clear-btn { margin: 5px 4px; }
.gradient-btn { margin: 5px 5px 6px; }
.round-btn { margin: 6px 4px; }
.sharp-btn { margin: 5px 8px; }
.shrink-btn { margin: 5px $shrink-size; }
.lefttop-btn { margin: 6px 5px; }
.picross-btn { margin: 4px ($picross-shadow + 3px) ($picross-shadow + 4px) 4px; }
.classic-btn { margin: 5px 5px; }
.simple-btn { margin: 5px 5px; }
.threed-btn { margin: 5px 5px; }

View Compiled

// SCSS gallery/library of different buttons 
//
// yeah, old compass, it sucks.
// easily customazible
// works well with both <a> and <button> elements

// click it

This Pen is owned by Josef Podstata on CodePen.

See more by @Empe on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js