Cacher is the code snippet organizer for pro developers

<div class="showbox">
	<h1>Elegantly Materialized UI</h1>
	
	<section class="buttons">
		<h2>Basic Buttons</h2>
		<a href="#" class="elegant-button" >Basic</a>
		<a href="#" class="elegant-button royal" >Royal</a>
		<a href="#" class="elegant-button primary" >Primary</a>
		<a href="#" class="elegant-button info" >Info</a>
		<a href="#" class="elegant-button warning" >Warning</a>
		<a href="#" class="elegant-button success" >Success</a>
		<hr />
		<a href="#" class="elegant-button fa-shopping-cart" >Add to Cart</a>
		<a href="#" class="elegant-button fa-share-alt" >Share</a>
		<a href="#" class="elegant-button fa-floppy-o" >Save</a>
		<a href="#" class="elegant-button fa-cloud-upload" >Upload</a>
		<a href="#" class="elegant-button fa-check-circle-o success" >Success</a>
		<a href="#" class="elegant-button fa-rocket primary" >Start Now</a>
		<a href="#" class="elegant-button fa-trash-o warning" >Delete</a>
		
	</section>
	
	<section class="round-buttons">
		<h2>Round Buttons</h2>
		<a href="#" class="elegant-button fa-database round" ></a>
		<a href="#" class="elegant-button fa-dropbox round" ></a>
		<a href="#" class="elegant-button fa-codepen round" ></a>
		<a href="#" class="elegant-button fa-github round" ></a>
	</section>
</div>

//Disable click reaction
$('a').on('click', function(evt){
	evt.preventDefault();
	
	return false;
});

/*
Style Variables
*/

$bgColor: #fcfcfc;
$blueColor: #3bc2df;
$font_size: 16;
$unit: ( 1 / $font_size ) * 1em;
$em: $font_size * $unit;
$phi: 1.618;
$pi: 3.14159;

/* Import font families */
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,greek-ext,greek);

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,greek-ext,greek);

html, body {
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	margin: 0;
}

//I am using a container as show case to center the UI
.showbox {	
	font-family: 'Roboto';
	color: #777;
	margin: 3em auto;
	width: 700px;
	h1 {
		font-family: 'Open Sans';
		font-weight: 400;
		color: #0f0f0f;
	}
	h2 {
		font-size: 1.5 * $em;
		padding: 1.35em 0;
	}
	h2:after {
		display: block;
		content: " ";
		position: relative;
		height: 1px;
		background-color: #aaa;
		width: 75%;
		left: 25%;
		top: -1 * 0.65 * $em
	}
	
	section {
		margin-bottom: 1em;
		padding-bottom: 1em;		
	}
	
	hr {
		border-color: transparent transparent #777 transparent;
		border-style:  dotted;
		margin: 2em 0;
	}
}

/* Style */
@mixin elegant-button($textColor, $bgColor, $darken: 50, $factor: 1.5) {
	$magic_number: ( $phi / $factor);
	
	display: inline-block;
	position: relative;
	font-family: 'Open Sans','Roboto', sans-serif;
	font-size: $font_size * ( $unit * $magic_number );
	font-weight: 500;
	font-variant-ligatures: contextual;
	font-stretch: normal;
	
	color: $textColor;
	background-color: $bgColor;
	
	text-decoration: none;
	text-transform: uppercase;
	text-rendering: geometricPrecision;
	text-shadow: 0 .5px 1px darken($bgColor,18);
	letter-spacing: .5px;
	
	padding: $magic_number * $em 2 * $magic_number * $em;
	margin: 5 * $unit;
	
	//border: 1px solid #aaa;
	border-radius: 2 * $em;
	
	z-index: 1;
	
	transition: background-color 150ms ease-in-out, box-shadow 90ms ease-in-out, transform 100ms ease-out;		
	
	box-shadow: 0 -1px 0 .8px darken($bgColor, $darken), 0 1px 0 .8px darken($bgColor, $darken), 0 -1.2px 0 .3px darken($bgColor, $darken), 0 1.2px 0 .3px darken($bgColor, $darken);
	
	&.round {
		$size: 2 * $pi;
		$font: $size/1.8;

		//box-sizing: border-box;
		display: inline-block;
		width: $size/1.3 * $em;
		height: $size * $em;
		text-align: center;
		
		line-height: ($size/2) * 1.25 * $em;
		
		border-radius: 50%;
		
		box-shadow: 0 -1px 0 2px darken($bgColor, $darken),
			0 -3px 0 1.3px darken($bgColor, $darken),
			0 -4px 0 1.8px darken($bgColor, $darken),
			0 -5px 0 2.3px darken($bgColor, $darken),
			//bottom
			0 1px 0 2px darken($bgColor, $darken),
			0 3px 0 1.3px darken($bgColor, $darken),
			0 4px 0 1.8px darken($bgColor, $darken),
			0 5px 0 2.3px darken($bgColor, $darken);
		
		transition: background-color 300ms ease-in-out, box-shadow 180ms ease-in-out, transform 200ms ease-out;	
		
		&::before {
			color: darken($bgColor, $darken * 1.1);
			position: relative;
			top: $em/4;
			left:$em/8;
			vertical-align: middle;
			font-size: $font * $em;
			text-align: center;
		}
	}
	
	&:hover,&:focus {		
		background-color: darken($bgColor, 5);		
		
		box-shadow: 0 -1px 0 .7px darken($bgColor, $darken), 0 1px 0 .7px darken($bgColor, $darken), 0 -1px 0 .3px darken($bgColor, $darken), 0 1px 0 .3px darken($bgColor, $darken);
		
		outline: 0;
	}
	&:focus {
		background-color: lighten($bgColor, 2);
		
		box-shadow: 0 -.2px 0 .2px darken($bgColor, $darken), 0 2px 0 2px darken($bgColor, $darken), 0 -.2px 0 .2px darken($bgColor, $darken), 0 2px 0 2px darken($bgColor, $darken);
	}
	
	&:active {
		background-color: darken($bgColor, 5);
		transform: translateY(1px);
		
		box-shadow: 0 -1px 0 .6px darken($bgColor, $darken), 0 1px 0 .3px darken($bgColor, $darken), 0 -1.2px 0 .3px darken($bgColor, $darken), 0 .8px 0 .3px darken($bgColor, $darken);
	}

	&::before {
		font-family: 'FontAwesome';
		font-size: 110%;
		margin: 0 15 * $unit 0 2 * $unit;		
	}
}

.elegant-button {
	@include elegant-button(invert($bgColor), $bgColor);
	
	&.royal {
		@include elegant-button(#fff, $blueColor, 17.944);
	}
	
	&.warning {
		@include elegant-button(#fff, #c9302c, 17.944);
	}
	
	&.primary {
		@include elegant-button(#fff, #286090, 17.944);
	}
	
	&.info {
		@include elegant-button(#fff, #3366DC, 17.944);
	}
	
	&.success {
		@include elegant-button( #fff, #5cb85c, 17.944);
	}
}