Untitled

dabblet.css

.btn_sign {
	display: inline-block;
	width: 97px;
	text-align: center;
	text-decoration: none;
	font-size: 12px;
	line-height: 1.5;
	color: #fff;
	border-radius: 3px;
	border: 1px solid;
	position: relative;
	box-shadow: 0 2px 1px -1px #fff inset,
				0 18px 18px -18px rgba(255, 255, 255, .6) inset;
}

.btn_sign_red   { background: #e25252; border-color: #ec4e4c; }
.btn_sign_green { background: #3fc351; border-color: #35ab45; }
.btn_sign_blue  { background: #34c5f6; border-color: #00a6dd; }

.btn_shadow {
	display: block;
	position: relative;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 3px;
}

.btn_sign_red:hover .btn_shadow   { box-shadow: 0 1px 1px 1px rgba(214, 4, 4, .7);}
.btn_sign_green:hover .btn_shadow { box-shadow: 0 1px 1px 1px rgba(4, 214, 32, .7);}
.btn_sign_blue:hover .btn_shadow  { box-shadow: 0 1px 1px 1px rgba(4, 163, 215, .7);}

.btn_sign:active .btn_shadow {
	box-shadow: 0 0;
}

.btn_sign:active {
	box-shadow: 0 18px 18px -18px rgba(255, 255, 255, .6) inset;
}

.btn_sign +.btn_sign {
	margin-left: 10px;
}

dabblet.html

<div>
		<a href="#" class="btn_sign btn_sign_blue">
			<span class="btn_shadow"> 
				Подписаться
			</span>
		</a>
		<a href="#" class="btn_sign btn_sign_red">
			<span class="btn_shadow"> 
				Подписаться
			</span>
		</a>
		<a href="#" class="btn_sign btn_sign_green">
			<span class="btn_shadow"> 
				Подписаться
			</span>
		</a>
	</div>

settings.json

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