Simple button [CSS]

dabblet.css

/* Simple button [CSS] */
html,body {
	min-height: 100%;
	height: 100%;
	overflow: hidden;
}

/* Fancy noise */
html:after {
	background-image: -webkit-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125)), -webkit-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125));
	background-image: -moz-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125)), -moz-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125));
	background-image: -o-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125)), -o-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125));
	background-image: -ms-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125)), -ms-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125));
	background-image: linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125)), linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125));

	-webkit-background-size: 2px 2px;
	-moz-background-size: 2px 2px;
	background-size: 2px 2px;
	background-position: 0 0, 1px 1px;
	display: block;
	content: "";
}

body {
	font: normal normal 1em/1.5em "HelveticaNeue", Helvetica Neue, Helvetica sans-serif;
	-webkit-font-smoothing: antialiased;
	text-shadow: 0 0 1px rgba(0,0,0,0.01);
	-webkit-text-stroke: 1px transparent;
	text-rendering: optimizeLegibility;
	color: #000;

	background: -webkit-radial-gradient(#8A9095,#2A3740);
	background: -moz-radial-gradient(#8A9095,#2A3740);
	background: -o-radial-gradient(#8A9095,#2A3740);
	background: -ms-radial-gradient(#8A9095,#2A3740);
	background: radial-gradient(#8A9095,#2A3740);

	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	
	margin:0;
	padding:0;
}

/* BUTTON */
a {
	text-decoration: none;

	-webkit-background-clip: padding-box;
	-moz-background-clip: padding-box;
	background-clip: padding-box;
}

a.button:link, a.button:visited {
	display: block;
	width: auto;
	text-align: center;
	padding: 8px 10px;
	color: white;
	text-shadow: 0 1px rgba(0,0,0,0.3);
	font-weight: bold;

	background: -webkit-linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.3));
	background: -moz-linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.3));
	background: -o-linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.3));
	background: -ms-linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.3));
	background: linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.3));
	background-color: #DC2625;
	border: 1px solid #6A1515;
	border-radius: 6px;

	-webkit-box-shadow: 0 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 0 rgba(255,255,255,0.3);
	box-shadow: 0 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 0 rgba(255,255,255,0.3);

	-webkit-transition: .2s;
	-moz-transition: .2s;
	-o-transition: .2s;
	-ms-transition: .2s;
	transition: .2s;
}

a.button:hover {
	background: -webkit-linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.32));
	background: -moz-linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.32));
	background: -o-linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.32));
	background: -ms-linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.32));
	background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.32));
	background-color: #DC2625;
	border: 1px solid #500E0D;
	color:#fff;
}

a.button:active {
	color: #eee;

	background: -webkit-linear-gradient(rgba(0,0,0,0.32),rgba(0,0,0,0.0));
	background: -moz-linear-gradient(rgba(0,0,0,0.32),rgba(0,0,0,0.0));
	background: -o-linear-gradient(rgba(0,0,0,0.32),rgba(0,0,0,0.0));
	background: -ms-linear-gradient(rgba(0,0,0,0.32),rgba(0,0,0,0.0));
	background: linear-gradient(rgba(0,0,0,0.32),rgba(0,0,0,0.0));
	background-color: #921a19;
	border: 1px solid #500E0D;

	-webkit-box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.3), 0 1px 0 0 rgba(255,255,255,0.3);
	box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.3), 0 1px 0 0 rgba(255,255,255,0.3);

	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	-ms-transition: none;
	transition: none;
}

/* This bit is for the demo */
a.button {
	position: absolute;
	top: 50%;
	left:50%;
	margin: -21px -50px;
}


.bar{height:auto;background:#222;clear:both;z-index:100;position:absolute;bottom:0;width:100%;}
.bar p{color:#fff;padding:10px 20px;text-align:center;font-weight:bold;margin:0;}
.bar a {text-decoration:none;border-bottom:2px solid #eee;outline:none;}
.bar a, .bar a:link, .bar a:active, .bar a:visited {color:#fff;}
.bar a:hover {color:#ddd; border-bottom-color:#ddd;}

dabblet.html

<a href="#" class="button">Download</a>


<div class="bar"><p>Made with &hearts; by <a href="http://louisbullock.com.au">Louis Bullock</a></p></div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"","page":"all"}