Cacher is the code snippet organizer for pro developers

<div>
	<button class="round">round</button>
	<button class="square">square</button>
</div>

$from: #E71063;
$to: orange;

.round {
	border-radius: 20em;
	box-shadow:
		inset 0 2px 2px 0 $from,
		inset 0 0 0 2px $to;
}

.square {
	border-style: solid;
	border-width: 0 2px;
	border-image: linear-gradient( to bottom, $from, $to) 1 100%;
	
	box-shadow:
		inset 0 2px 0 0 $from,
		inset 0 -2px 0 0 $to;
}

@import url('https://fonts.googleapis.com/css?family=Roboto');

html, * {
	font-family: Roboto;
}

html {
	padding: 1em;
	font-family: Roboto;
	background: #eee;
}

div {
	width: 20em;
	margin: auto;
}

button {
	width: 100%;
	height: 2em;
	margin: .5em auto;
	
	font-size: 1.5em;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 100;
	
	color: $from;
	
	border: 0;
	background: rgba(white, .5);
	
	transition: 300ms;
	
	cursor: pointer;
	
	&:hover {
		background: rgba(white, .75);
		text-shadow: 
			0 0 .05em white,
			0 0 .05em white,
			0 0 .1em $to,
			0 0 .2em $to;
	}
}