CSS3 Buttons - Created by Lane Olson

dabblet.css

/**
 * CSS3 Buttons - Created by Lane Olson
 */
 
body {
	background: #069;
	background: url(http://twitter.github.com/bootstrap/assets/img/bs-docs-masthead-pattern.png) repeat center center, 
				linear-gradient(90deg, #069, #09c);

	min-height: 100%;
	font-family: sans-serif;
	color: #234;
}

.container { 
	text-align: center; 
	background: #fffef6;
	box-shadow: 0px 1px 4px rgba(0,0,0,0.2), inset 0px -3px 2px #eee; 
	margin: 20px 20%;
	border-radius: 7px;
	padding: 2px 2px 10px;
}

h1 {
	text-align: left;
	color: #eff;
	font-weight: bold;
	font-size: 3em;
	text-shadow: -1px -1px 1px rgba(0,0,0,0.5);
	border-bottom: 1px solid rgba(0,0,0,0.2);
	box-shadow: 0px 1px 0px rgba(255,255,255,0.2);
	margin: 20px 20%;
}

h2 { 
	font-weight: bold; 
	font-size: 1em; 
	text-align: left; 
	background: #eff;
	background: linear-gradient(#fff, #eff);  
	border-bottom: 1px solid #ded;
	margin:0 0 5px 0; 
	padding: 10px; 
	border-radius: 5px 5px 0px 0px;  
	color: #699;
}

.btn {
	border-radius:4px;
	display: inline-block;
	font-family: sans-serif;
	font-weight: bold;
	font-size: 1em;
	margin: 10px 5px;
	padding:15px 20px 13px 20px;
	text-decoration: none;
	text-align: center;
}

.btn-glossy-light { 
	background: linear-gradient(transparent 90%, rgba(0,0,0,0.1)), 
				linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.65) 50%, transparent 50%);
	background-color: #F7FCF9;
	border: 1px solid;
	border-color: transparent rgba(0,0,0,0.15) rgba(0,0,0,0.25);
	box-shadow: 0px 1px 4px rgba(0,0,0,0.2), inset 0px 1px 4px rgba(255,255,255,0.65);
	color: #666;
	text-shadow: 1px 1px 1px #fff;
	/* IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#00FFFFFF);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#00FFFFFF)";
}

.btn-glossy-light:hover {
	background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.02) 50%, rgba(0,0,0,0) 90%, rgba(0,0,0,0.03)), 
				linear-gradient(rgba(255,255,255,0.02), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50%);
	box-shadow: 0px 1px 2px rgba(255,255,255,0.35), inset 0px 1px 10px rgba(0,0,0,0.2);
	background-color: #e6ebe8;
	border-color: rgba(0,0,0,0.15) rgba(0,0,0,0.15) rgba(0,0,0,0.2);
	/* IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FFFFFF, endColorstr=#06000000);	
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FFFFFF, endColorstr=#06000000)";
}

.btn-glossy-dark { 
	background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0) 90%, rgba(0,0,0,0.15)), 
				linear-gradient(rgba(255,255,255,0.02), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50%);
	box-shadow: 0px 1px 4px rgba(0,0,0,0.2), inset 0px 1px 10px rgba(255,255,255,0.25);
	border: 1px solid;
	border-color: rgba(255,255,255,0.1) rgba(0,0,0,0.15) rgba(0,0,0,0.35);
	text-shadow: -1px -1px 1px rgba(0,0,0,0.3);
	color:#fff;
	background-color: #333;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FFFFFF, endColorstr=#00FFFFFF);	
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FFFFFF, endColorstr=#00FFFFFF)";
}

.btn-glossy-dark:hover {
	background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.02) 50%, rgba(0,0,0,0) 90%, rgba(0,0,0,0.03)), 
				linear-gradient(rgba(255,255,255,0.02), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50%);
	box-shadow: 0px 1px 2px rgba(255,255,255,0.35), inset 0px 1px 10px rgba(0,0,0,0.2);
	border-color: rgba(0,0,0,0.15) rgba(0,0,0,0.15) rgba(0,0,0,0.2);
	background-color: #222;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#11000000);	
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#11000000)";
}

.btn-glossy-dark.btn-green {
	background-color: #074;
	color: #efe;
}
.btn-glossy-dark.btn-green:hover {
	background-color: #063;
}

.btn-glossy-dark.btn-blue, .btn-glossy-dark.btn-blue:hover {
	background-color: #037;
	color: #eef;
}

.btn-glossy-dark.btn-red, .btn-glossy-dark.btn-red:hover {
	background-color: #a12;
	color: #fee;
}

.btn-glossy-dark.btn-orange, .btn-glossy-dark.btn-orange:hover {
	background-color: #f60;
	color: #fed;
}

.btn-glossy-dark.btn-purple, .btn-glossy-dark.btn-purple:hover {
	background-color: #70f;
	color: #edf;
}

.btn-glossy-dark.btn-yellow, .btn-glossy-dark.btn-yellow:hover {
	background-color: #eb0;
	color: #ffe;
}

.btn-glossy-light.btn-yellow {
	background-color: #ffff9f;
	color: #770;
}

.btn-glossy-light.btn-red {
	background-color: #ffcfcf;
	color: #c44;
}

.btn-glossy-light.btn-orange {
	background-color: #ffcf9f;
	color: #c63;
}

.btn-glossy-light.btn-green {
	background-color: #cfffcf;
	color: #393;
}

.btn-glossy-light.btn-blue {
	background-color: #cfdfff;
	color: #36c;
}

.btn-glossy-light.btn-purple {
	background-color: #dfcfff;
	color: #63c;
}

dabblet.html

<!-- content to be placed inside <body>…</body> -->
<h1>Buttons</h1>

<div class="container">
	<h2>Dark Buttons</h2>
	<a href="#" class="btn btn-glossy-dark">Button</a>
	<a href="#" class="btn btn-glossy-dark btn-red">Button</a>
	<a href="#" class="btn btn-glossy-dark btn-orange">Button</a>
	<a href="#" class="btn btn-glossy-dark btn-yellow">Button</a>
	<a href="#" class="btn btn-glossy-dark btn-green">Button</a>
	<a href="#" class="btn btn-glossy-dark btn-blue">Button</a>
	<a href="#" class="btn btn-glossy-dark btn-purple">Button</a>
</div>

<div class="container">
	<h2>Light Buttons</h2>
	<a href="#" class="btn btn-glossy-light">Button</a>
	<a href="#" class="btn btn-glossy-light btn-red">Button</a>
	<a href="#" class="btn btn-glossy-light btn-orange">Button</a>
	<a href="#" class="btn btn-glossy-light btn-yellow">Button</a>
	<a href="#" class="btn btn-glossy-light btn-green">Button</a>
	<a href="#" class="btn btn-glossy-light btn-blue">Button</a>
	<a href="#" class="btn btn-glossy-light btn-purple">Button</a>
</div>

settings.json

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