Button Effects (CSS)

dabblet.css

/**
 * Button Effects (CSS)
 */

body {
	background: #fff;
	font:200 normal 16px/1.5 'Helvetica Neue', Arial, sans-serif;
}
h1 {
	font-size: 80px;
	font-weight: normal;
	font-family: 'Lovers Quarrel', cursive;
	line-height:1.3;
	background-color:#ffc;
	padding:0 20px;
}
.button {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: 9px 22px 9px;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	border-radius: .5em;
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	margin:20px 10px;
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}

/* orange */
.orange {
	color: #fef4e9;
	border: solid 1px #da7c0c;
	background-color: #f78d1d;
	background-image: linear-gradient(top,  #faa51a,  #f47a20);
}
.orange:hover {	
	background: #f47c20;
	background: linear-gradient(top,  #f47a20,  #faa51a);
	box-shadow: 0 2px 8px rgba(255, 60, 0, .5);
}
.orange:active {
	color: #fcd3a5;
	background: linear-gradient(top,  #f47a20,  #faa51a);
}
/* red */
.red {
	color: #faddde;
	border: solid 1px #980c10;
	background: #d81b21;
	background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
}
.red:hover {
	background: #b61318;
	background: linear-gradient(top,  #c9151b,  #a11115);
}
.red:active {
	color: #de898c;
	background: linear-gradient(top,  #aa1317,  #ed1c24);
}
/* blue */
.blue {
	color: #d9eef7;
	border: solid 1px #0076a3;
	background: #0095cd;
	background: linear-gradient(top,  #00adee,  #0078a5);
}
.blue:hover {
	background: #007ead;
	background: linear-gradient(top,  #0095cc,  #00678e);
}
.blue:active {
	color: #90cee6;
	padding:10px 21px 8px 23px;
	background: linear-gradient(top,  #0078a5,  #00adee);
	box-shadow: inset 2px 2px 2px rgba(255, 60, 0, .5);
}

dabblet.html

<a href="#" class="button red">Click me</a><br>
<a href="#" class="button orange">Click me</a><br>
<a href="#" class="button blue">Click me</a>
<p><a href="http://favbulous.com/post/933/10-gorgeous-css3-buttons-ready-to-be-used">Outros tipos de botões</a></p>

settings.json

{"view":"separate","seethrough":"","prefixfree":"1","page":"all"}