Button

dabblet.css

/* Button */


html {
	font-size: 16px;
}
body {
	font-size: 62.5%;
}
.wrap {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -100px;
	margin-left: -75px;
}

.button {
	text-decoration: none; /* Case of links */
	cursor: pointer; /* Case not link */
	text-transform: capitalize; /* Make it capt */
	color: #1d1d1d; /* Not so dark */
	padding: 10px 15px;
	height: 23px;
	font-size: 2em;
	width: 150px; /* Just to make it look nice */
	display: inline-block;
	border: 1px solid #9d9d9d;
	box-shadow: 0 0 1px #2d2d2d;
	border-radius: 4px;
	text-align: center;
	position: relative;
	text-shadow: 0 -1px 0 #9d9d9d;
	transition: all 0.2s linear;
	background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
	font-family: Helvetica, Arial, Sans-Serif;
}
.button:hover,.button:focus {
	bottom: 10px;
	box-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
.button:active {
	background: linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,1) 100%);
}

dabblet.html

<div class="wrap">
	<a href="#" class="button">click me!</a>
</div><!--/wrap-->

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}