585 buttons

dabblet.css

/**
 * 585 buttons
 */
body {
	background: #ffffff;
	min-height: 100%;
	text-align: center;
}
button {
	height: 30px;
	font-size: 16px;
	color: #fff;
	padding: 0.25em 2em 0.5em;
	background: hsl(1, 77%, 55%);
	box-shadow: 0px 1px 0px 0px hsl( 0, 73%, 41%);;
	border-radius: 5px;
	border: none;
	outline: none;	
	margin: 0 1em 0 0;
	transition: all 200ms;
}
button:hover {transition: all 200ms;}

button:hover {background: hsl(1, 100%, 60%);	box-shadow: 0px 1px 0px 0px hsl( 0, 73%, 46%);}
button:active {	background: hsl(1, 100%, 40%);	box-shadow: 0px 1px 0px 0px hsl( 0, 73%, 26%);;}
button:disabled {color: hsla(0, 0%, 100%, 0.4);}

button.grey {background: hsl(208, 18%, 69%); box-shadow: 0px 1px 0px 0px hsl(208, 9%, 52%);}
button.grey:hover {background: hsl(208, 18%, 74%); box-shadow: 0px 1px 0px 0px hsl(208, 9%, 57%);}
button.grey:active {background: hsl(208, 18%, 54%); box-shadow: 0px 1px 0px 0px hsl(208, 9%, 37%);}

button.blue {background: hsl(207, 57%, 56%); box-shadow: 0px 1px 0px 0px hsl(207, 41%, 39%);}
button.blue:hover {background: hsl(207, 57%, 61%); box-shadow: 0px 1px 0px 0px hsl(207, 41%, 44%);}
button.blue:active {background: hsl(207, 57%, 41%); box-shadow: 0px 1px 0px 0px hsl(207, 41%, 24%);}
button.blue:disabled {color: hsla(0, 0%, 100%, 0.4);}

button.disabled {color: hsla(0, 0%, 100%, 0.5);}


#page {	margin: 4em auto 0;}

dabblet.html

<div id="page">
	<button>Добавить</button><button class="grey"><div>Отнять</div></button><button class="blue">Умножить</button><br/><br/>
	<button class="disabled">Добавить</button><button class="grey disabled"><div>Отнять</div></button><button class="blue disabled">Умножить</button>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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