Mobile first button abstraction

dabblet.css

/**
 * Mobile first button abstraction
 */

.btn {
	background-color: #ccc;
	border: 2px solid rgba(255, 255, 255, 0.8);
	box-sizing: border-box;
	color: #000;
	display: block;
	padding: 1em 0;
	text-align: center;
	text-decoration: none;
	width: 100%;
}

@media screen and (min-width: 600px) {
	.btn {
		display: inline-block;
		padding: 1em;
		width: auto;
	}
}

/* Demonstrate btn modifiers */
.btn:hover, .btn[class*=active] {
	background-color: #2fa2cc;
	border: 2px solid rgba(255, 255, 255, 0.8);
	color: #fff;
}

dabblet.html

<a href="#" class="btn active">Twitter</a>
<a href="#" class="btn">Github</a>

settings.json

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