Buttons

dabblet.css

/**
 * Buttons
 */
 
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);

* {
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
}

html {
	background: #f8f8f8;
}

.btn {
	display: inline-block;
	-moz-border-radius: 5px;	
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid rgba(0,0,0,0.2);
	border-bottom: 1px solid rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2), inset 0px 1px 0px rgba(255,255,255,0.5);	
	-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2), inset 0px 1px 0px rgba(255,255,255,0.5);
	box-shadow: 0px 2px 2px rgba(0,0,0,0.2), inset 0px 1px 0px rgba(255,255,255,0.5);
	padding: 12px 22px;	
	color: #FFF;
	font-family: sans-serif;
	text-align: center;
	text-transform: uppercase;
	font-size: 14px;
	margin: 50px; /* remove */
	text-decoration: none;
	text-shadow: 1px 1px 3px rgba(0,0,0,.2);
	font-weight: 700;
}

.small.btn {
	padding: 8px 10px;
}

.large.btn {
	padding: 16px 100px;
	font-size: 20px;
}

/** Orange button **/

.orange.btn {
	background-color: #F8851E;
	background-image: -o-linear-gradient(0deg , rgb(244,99,17) 0%, rgb(255,135,30) 100%);
	background-image: -moz-linear-gradient(0deg , rgb(244,99,17) 0%, rgb(255,135,30) 100%);
	background-image: -webkit-linear-gradient(0deg , rgb(244,99,17) 0%, rgb(255,135,30) 100%);
	background-image: -ms-linear-gradient(0deg , rgb(244,99,17) 0%, rgb(255,135,30) 100%);
	background-image: linear-gradient(0deg , rgb(244,99,17) 0%, rgb(255,135,30) 100%);
}

.orange.btn:hover {
	background: #f46311;
}

.orange.btn:active, .orange.btn:focus {
	-moz-box-shadow: 0px 2px 3px rgba(0,0,0,0.2), inset 0px 0px 5px rgba(0,0,0,.2);	
	-webkit-box-shadow: 0px 2px 3px rgba(0,0,0,0.2), inset 0px 0px 5px rgba(0,0,0,.2);
	box-shadow: 0px 2px 3px rgba(0,0,0,0.2), inset 0px 0px 5px rgba(0,0,0,.2);
}

/** Green button **/

.green.btn {
	background-color: #566d53;
	background-image: -o-linear-gradient(0deg , rgb(44,63,42) 0%, rgb(86,109,83) 100%);
	background-image: -moz-linear-gradient(0deg , rgb(44,63,42) 0%, rgb(86,109,83) 100%);
	background-image: -webkit-linear-gradient(0deg , rgb(44,63,42) 0%, rgb(86,109,83) 100%);
	background-image: -ms-linear-gradient(0deg , rgb(44,63,42) 0%, rgb(86,109,83) 100%);
	background-image: linear-gradient(0deg , rgb(44,63,42) 0%, rgb(86,109,83) 100%);
}

.green.btn:hover {
	background: #2c3f2a;
}

.green.btn:active, .green.btn:focus {
	-moz-box-shadow: 0px 2px 3px rgba(0,0,0,0.2), inset 0px 0px 5px rgba(0,0,0,.2);	
	-webkit-box-shadow: 0px 2px 3px rgba(0,0,0,0.2), inset 0px 0px 5px rgba(0,0,0,.2);
	box-shadow: 0px 2px 3px rgba(0,0,0,0.2), inset 0px 0px 5px rgba(0,0,0,.2);
}

/** Light button **/

.light.btn {
	background-color: #efefef;
	background-image: -o-linear-gradient(0deg , rgb(239,239,239) 0%, rgb(255,255,255) 100%);
	background-image: -moz-linear-gradient(0deg , rgb(239,239,239) 0%, rgb(255,255,255) 100%);
	background-image: -webkit-linear-gradient(0deg , rgb(239,239,239) 0%, rgb(255,255,255) 100%);
	background-image: -ms-linear-gradient(0deg , rgb(239,239,239) 0%, rgb(255,255,255) 100%);
	background-image: linear-gradient(0deg , rgb(239,239,239) 0%, rgb(255,255,255) 100%);
	color: #4a4a4a;
	text-transform: none;
	text-shadow: none;
	font-weight: 400;
}

.light.btn:hover {
	background: #efefef;
}

.light.btn:active, .light.btn:focus {
	-moz-box-shadow: 0px 0px 1px rgba(0,0,0,0.1), inset 0px 0px 3px rgba(0,0,0,.2);	
	-webkit-box-shadow: 0px 0px 1px rgba(0,0,0,0.1), inset 0px 0px 3px rgba(0,0,0,.2);
	box-shadow: 0px 0px 1px rgba(0,0,0,0.1), inset 0px 0px 3px rgba(0,0,0,.2);
}

dabblet.html

<a href="#" class="large orange btn">Register Now</a>
<a href="#" class="orange btn">A normal size button with quite a bit of content</a>
<a href="#" class="small orange btn">250 chf</a>

<a href="#" class="large green btn">Register Now</a>
<a href="#" class="green btn">A normal size button with quite a bit of content</a>
<a href="#" class="small green btn">250 chf</a>

<a href="#" class="large light btn">Register Now</a>
<a href="#" class="light btn">A normal size button with quite a bit of content</a>
<a href="#" class="small light btn">250 chf</a>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}