Buttons, buttons, buttons for scrooge!

dabblet.css

/**
 * Buttons, buttons, buttons for scrooge!
 */
 
@import url(http://fonts.googleapis.com/css?family=Oswald); 

button, label {
	font-family: 'Oswald', Helvetica, Arial;
	font-size: 100%;
	line-height: normal;
	text-transform: uppercase;
	
	vertical-align: middle;
}

button, label {
	margin: 0 3px;
	box-sizing: border-box;
}

button {
	padding: 0;
	width: 43px;
	height: 43px;
}

label {
	padding: 0 3px;
	height: 43px;
	line-height: 39px;
	display: inline-block;
}

label input {
	display: none;
}

button, label {
	transition-property: border-color, color;
	transition-duration: 0.1s;
	transition-timing-function: linear;
}

button, label {
	border: 3px solid #222;
	border-radius: 7px;
	background: transparent;
	cursor: pointer;
	user-select: none;
}

button:hover, label:hover {
	border-color: #1ABC9C;
	color: #1ABC9C;
}

button:active, label:active {
	background-color: #1ABC9C;
	border-color: none;
	color: #fff;
}

dabblet.html

<div>
	<label>Increment<input type="checkbox" /></label>
	<button value="1000">1K</button>
	<button value="10000">10K</button>
	<button value="100000">100k</button>
	<button value="500000">500k</button>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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