btn_sign

dabblet.css

/**
 * btn_sign
 */
.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;
	box-shadow:
				0 18px 18px -18px rgba(255, 255, 255, .6) inset,
				0 2px 1px -1px #fff 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_sign_red:hover {
	box-shadow:
				0 18px 18px -18px rgba(255, 255, 255, .6) inset,
				0 2px 1px -1px #fff inset,
				0 1px 1px 0 rgba(214, 4, 4, .7);
}

.btn_sign_green:hover {
	box-shadow:
				0 18px 18px -18px rgba(255, 255, 255, .6) inset,
				0 2px 1px -1px #fff inset,
				0 1px 1px 0 rgba(4, 214, 32, .7);
}

.btn_sign_blue:hover {
	box-shadow:
				0 18px 18px -18px rgba(255, 255, 255, .6) inset,
				0 2px 1px -1px #fff inset,
				0 1px 1px 0 rgba(4, 163, 215, .7);
}

.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">
			Подписаться
		</a>
		<a href="#" class="btn_sign btn_sign_blue">
			Подписаться
		</a>
		<a href="#" class="btn_sign btn_sign_red">
			Подписаться
		</a>
		<a href="#" class="btn_sign btn_sign_green">
			Подписаться
		</a>
	</div>

settings.json

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