Buttonsbuttonsbuttons

dabblet.css

/* Buttonsbuttonsbuttons */
/* Designed by Anthony Lagoon - http://drbl.in/efCN */

html {
	background-image: linear-gradient(#edeeef, #fff);
	min-height: 100%;
}

body {
	font: 100%/1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	margin: 1.5em;
}

.butt {
	display: inline-block;
	margin-bottom: .75em;
	padding: .3em .75em;
	background-color: #f6f6f6;
	background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.15));
	text-decoration: none;
	color: rgba(0,0,0,.8);
	text-shadow: 0 1px rgba(255,255,255,.3);
	font-weight: 700;
	border-radius: 4px;
	border: 1px solid #aaa;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px rgba(255,255,255,.3);
	cursor: pointer;
}

.butt[disabled], .butt.disabled {
	opacity: .8;
	background-image: none;
	box-shadow: none;
	cursor: default;
	color: rgba(0,0,0,.5);
}

.butt:hover, .butt.hover {
	background-color: #fff;
	border-bottom-width: 2px;
}

.butt:active, .butt.active {
	background-color: #ddd;
	border-color: #666;
	border-bottom-width: 1px;
	box-shadow: inset 0 0 2px rgba(0,0,0,.3), inset 0 2px 1px rgba(0,0,0,.3), 0 1px rgba(255,255,255,.2);
}

.butt.primary {
	background-color: #2a9adf;
	color: #fff;
	text-shadow: 0 -1px rgba(0,0,0,.4);
	border-color: #094083
}

.butt.primary[disabled], .butt.primary.disabled {
	color: rgb(240,255,255);
}

.butt.primary:hover, .butt.primary.hover {
	background-color: #48b1f1;
}

.butt.primary:active, .butt.primary.active {
	background-color: #0a4d97;
	border-color: #133245;
}

.butt.info {
	background-color: #93e1f5;
	border-color: #199ebf;
	color: rgb(0,40,90)
}

.butt.info:active, .butt.info.active {
	background-color: #56c2f0;
	border-color: #1e6887;
}

.butt.success {
	background-color: #80d90d;
	border-color: #518f00;
	color: #fff;
	text-shadow: 0 -1px rgba(0,0,0,.4);
}

.butt.success[disabled], .butt.success.disabled {
	color: #f7ffde;
	text-shadow: 0 -1px rgba(0,0,0,.2);
}

.butt.success:hover, .butt.success.hover {
	background-color: #9de53e;
}

.butt.success:active, .butt.success.active {
	background-color: #67b600;
	border-color: #3e6e00;
}

.butt.warning {
	background-color: #ed8a00;
	border-color: #a13b00;
	color: #fff;
	text-shadow: 0 -1px rgba(0,0,0,.4);
}

.butt.warning[disabled], .butt.warning.disabled {
	color: rgb(255,248,220);
	text-shadow: 0 -1px rgba(0,0,0,.2);
}

.butt.warning:hover, .butt.warning.hover {
	background-color: #f79000;
}

.butt.warning:active, .butt.warning.active {
	background-color: #d46300;
}

.butt.danger {
	background-color: #e32;
	border-color: #992014;
	color: #fff;
	text-shadow: 0 -1px rgba(0,0,0,.4);
}

.butt.danger[disabled], .butt.danger.disabled {
	color: #fde7df;
}

.butt.danger:hover, .butt.danger.hover {
	background-color: #f84232;
}

.butt.danger:active, .butt.danger.active {
	background-color: #992014;
	border-color: #62130b; 
}

.butt.inverse {
	background-color: #333;
	background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.75));
	border-color: #111;
	color: #fff;
	text-shadow: 0 -1px rgba(0,0,0,.4);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 1px rgba(255,255,255,.1);
}

.butt.inverse[disabled], .butt.inverse.disabled {
	color: rgba(255,255,255,.6);
	background-image: none;
	box-shadow: none;
}

.butt.inverse:hover, .butt.inverse.hover {
	background-color: #444;
}

.butt.inverse:active, .butt.inverse.active {
	background-color: #222;
	box-shadow: inset 0 0 2px #000, inset 0 2px 1px #000;
}

dabblet.html

<a href=# class="butt">Default</a> <a href=# class="butt disabled">Default</a> <a href=# class="butt hover">Default</a> <a href=# class="butt active">Default</a>
<br>
<a href=# class="butt primary">Primary</a> <a href=# class="butt primary disabled">Primary</a> <a href=# class="butt primary hover">Primary</a> <a href=# class="butt primary active">Primary</a>
<br>
<a href=# class="butt info">Info</a> <a href=# class="butt info disabled">Info</a> <a href=# class="butt info hover">Info</a> <a href=# class="butt info active">Info</a>
<br>
<a href=# class="butt success">Success</a> <a href=# class="butt success disabled">Success</a> <a href=# class="butt success hover">Success</a> <a href=# class="butt success active">Success</a>
<br>
<a href=# class="butt warning">Warning</a> <a href=# class="butt warning disabled">Warning</a> <a href=# class="butt warning hover">Warning</a> <a href=# class="butt warning active">Warning</a>
<br>
<a href=# class="butt danger">Danger</a> <a href=# class="butt danger disabled">Danger</a> <a href=# class="butt danger hover">Danger</a> <a href=# class="butt danger active">Danger</a>
<br>
<a href=# class="butt inverse">Inverse</a> <a href=# class="butt inverse disabled">Inverse</a> <a href=# class="butt inverse hover">Inverse</a> <a href=# class="butt inverse active">Inverse</a>

settings.json

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