Button w/o images

dabblet.css

/**
 * Button w/o images
 */
html {
	font-size: 62.5%;
	}
body {
	font: normal 1em/1em Arial, Tahoma, Verdana, sans-serif;
	}

 
 /* layout */
.btn {
	display: inline-block;
	height: 28px;
	border-width: 1px;
	border-style: solid;
	width: 170px;
	box-sizing: content-box;
	overflow: hidden;
	}
.btn.btn_small {
	width: 130px;
	}
	
 /* typo */
 .btn {
	/* 28 / 14 = 2.57142857 */
	font: bold 14px/2 Arial, Helvetica, Tahoma, sans-serif;
	text-transform: uppercase;
	}
.btn:active {
	line-height: 2.4em;
	}

 /* color */
.btn {
	background-color: #00cccc;
	color: #fff;
	border-color: #00a8a8;
	border-radius: 3px;
	cursor: pointer;
	box-shadow:
		 1px  1px 4px rgba(255, 255, 255, 0.5) inset,			
		-1px -1px 4px rgba(000, 000, 000, 0.5) inset;
	}
.btn:hover {
	background-color: #00ebeb;
	}
.btn:active {
	box-shadow:
		-1px -1px 4px rgba(255, 255, 255, 0.5) inset,			
		 1px  1px 4px rgba(000, 000, 000, 0.5) inset;
	}

/* green */
.btn.btn_green {
	background-color: #009900;
	border-color: #009600;
	}
.btn.btn_green:hover {
	background-color: #00c200;
	}

/* red */
.btn.btn_red {
	background-color: #e00000;
	border-color: #c13d00;
	}
.btn.btn_red:hover {
	background-color: #f00000;
	}

dabblet.html

<!--
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
-->
<!--[if lt IE 7]> 
	<div id="body" class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en">
<![endif]-->
<!--[if IE 7]>
	<div id="body" class="no-js lt-ie9 lt-ie8 ie7" lang="en">
<![endif]-->
<!--[if IE 8]>
	<div id="body" class="no-js lt-ie9 ie8" lang="en">
<![endif]-->
<!--[if gt IE 8]><!-->
	<div id="body" class="no-js no-ie" lang="en">
<!--<![endif]-->



<button class="btn btn_green btn_small ">
	Send
	<span class="top" /><span class="bottom" />
</button>

<button class="btn">
	Buy
	<span class="top" /><span class="bottom" />
</button>

<button class="btn btn_green">
	Activate
	<span class="top" /><span class="bottom" />
</button>

<button class="btn btn_red">
	Delete
	<span class="top" /><span class="bottom" />
</button>


</div>

settings.json

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