Stylish Gradient Buttons

dabblet.css

/**
 * Stylish Gradient Buttons
 */
/**
 * Designed and coded by Anatoli Nicolae
 * http://dribbble.com/anatolinicolae
 */

body {
	background: #f5f5f5;
	width: 100%;
	height: 100%;
	font: 16px 'Helvetica-Neue', "Helvetica", arial, sans-serif;
}

.steve {
	width: 500px;
	height: 250px;
	margin: 25% auto 0;
}

.button {
	padding: 13px 40px;
	border: 1px solid;
	border-radius: 4px;
	box-shadow: inset 0 -2px 15px 0 rgba(0, 0, 0, 0.15), inset 0 1px 1px 0 rgba(255, 255, 255, 0.5), 0 2px 2px 0 rgba(0, 0, 0, 0.15);
	display: inline-block;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
	transition: opacity 1s;
	-moz-transition: opacity 1s;
	-webkit-transition: opacity 1s;
	-o-transition: opacity 1s;

}
.red {
	border-color: #C9362F;
	background-color: #e67060;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(230, 112, 96)), to(rgb(205, 41, 37)));
	background-image: -webkit-linear-gradient(top, rgb(230, 112, 96), rgb(205, 41, 37));
	background-image: -moz-linear-gradient(top, rgb(230, 112, 96), rgb(205, 41, 37));
	background-image: -o-linear-gradient(top, rgb(230, 112, 96), rgb(205, 41, 37));
	background-image: -ms-linear-gradient(top, rgb(230, 112, 96), rgb(205, 41, 37));
	background-image: linear-gradient(top, rgb(230, 112, 96), rgb(205, 41, 37));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#e67060', EndColorStr='#cd2925');
}
.green {
	border-color: #008f4f;
	background-color: #00dd95;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 221, 149)), to(rgb(0, 184, 78)));
	background-image: -webkit-linear-gradient(top, rgb(0, 221, 149), rgb(0, 184, 78));
	background-image: -moz-linear-gradient(top, rgb(0, 221, 149), rgb(0, 184, 78));
	background-image: -o-linear-gradient(top, rgb(0, 221, 149), rgb(0, 184, 78));
	background-image: -ms-linear-gradient(top, rgb(0, 221, 149), rgb(0, 184, 78));
	background-image: linear-gradient(top, rgb(0, 221, 149), rgb(0, 184, 78));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#00dd95', EndColorStr='#00b84e');
}
.blue {
	border-color: #194fdc;
	background-color: #67a4f7;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(103, 164, 247)), to(rgb(37, 96, 237)));
	background-image: -webkit-linear-gradient(top, rgb(103, 164, 247), rgb(37, 96, 237));
	background-image: -moz-linear-gradient(top, rgb(103, 164, 247), rgb(37, 96, 237));
	background-image: -o-linear-gradient(top, rgb(103, 164, 247), rgb(37, 96, 237));
	background-image: -ms-linear-gradient(top, rgb(103, 164, 247), rgb(37, 96, 237));
	background-image: linear-gradient(top, rgb(103, 164, 247), rgb(37, 96, 237));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#67a4f7', EndColorStr='#2560ed');
}
.gray {
	border-color: #363e46;
	background-color: #6b7179;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(107, 113, 121)), to(rgb(40, 44, 51)));
	background-image: -webkit-linear-gradient(top, rgb(107, 113, 121), rgb(40, 44, 51));
	background-image: -moz-linear-gradient(top, rgb(107, 113, 121), rgb(40, 44, 51));
	background-image: -o-linear-gradient(top, rgb(107, 113, 121), rgb(40, 44, 51));
	background-image: -ms-linear-gradient(top, rgb(107, 113, 121), rgb(40, 44, 51));
	background-image: linear-gradient(top, rgb(107, 113, 121), rgb(40, 44, 51));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#6b7179', EndColorStr='#282c33');
}
.button:hover { opacity: 0.85; }
.button:active { position: relative; top: 1px; }

dabblet.html

<section class="steve">
	<a class="red button">Love</a>
	<a class="green button">your</a>
	<a class="blue button">CSS3</a>
	<a class="gray button">more!</a>
</section>

settings.json

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