Button Test Suite

dabblet.css

/**
 * Button Test Suite
 */

html {
	height: 100%;
	background: #333;
	font-family: Helvetica, sans-serif;
	font-weight: bold;
	color: #999;
	user-select: none;
}

body {
	padding: 0;
	margin: 0;
}

h1 {
	margin: 40px 40px 20px 40px;
}

h2 {
	margin: 0 0 40px 0;
	padding: 0;
	font-size: 24px;
}

.context {
	padding: 60px 40px 60px 40px;
	color: white;
}
.context.library {
	background: #333333;
}

	.btn {
		display: inline-block;
		margin-right: 30px;
		cursor: pointer;
		border-width: 2px;
		font-size: 14px;
		color: white;
	}
		.btn span {
		display: block;
		padding: 0 16px 0 16px;
		margin: 0;
		height: 26px;
		line-height: 24px;
	}
	
	.regular { border-image: 4 stretch url("https://dl.dropboxusercontent.com/u/115270/XDDPS/btn-suite/btn_stretch_up.png"); }
	.regular span { background: #525252; }
	.regular:active { border-image: 4 stretch url("https://dl.dropboxusercontent.com/u/115270/XDDPS/btn-suite/btn_stretch_down.png"); }
	.regular:active span { background: #202020; }
	
	.regular.disabled { border-image: 4 stretch url("https://dl.dropboxusercontent.com/u/115270/XDDPS/btn-suite/btn_stretch_disabled.png"); }
	.regular.disabled span { background: #424242; color: #999; }

	.dark { border-image: 4 stretch url("https://dl.dropboxusercontent.com/u/115270/XDDPS/btn-suite/btn_stretch_dark_up.png"); }
	.dark:active { border-image: 4 stretch url("https://dl.dropboxusercontent.com/u/115270/XDDPS/btn-suite/btn_stretch_dark_down.png"); }
	.dark span { background: #292929; }
		
	.blue { border-image: 4 stretch url("https://dl.dropboxusercontent.com/u/115270/XDDPS/btn-suite/btn_stretch_blue_up.png"); }
	.blue span { background: #00a8e7; }
	.blue:active { border-image: 4 stretch url("https://dl.dropboxusercontent.com/u/115270/XDDPS/btn-suite/btn_stretch_blue_down.png"); }
	.blue:active span { background: #0B5F92 }
	
	.blue.disabled { border-image: 4 stretch url("https://dl.dropboxusercontent.com/u/115270/XDDPS/btn-suite/btn_stretch_blue_disabled.png"); }
	.blue.disabled span { background: #2E91BF; color: #B4CFEC; }
	
	.red { border-image: 4 stretch url("https://dl.dropboxusercontent.com/u/115270/XDDPS/btn-suite/btn_stretch_red_up.png"); }
	.red span { background: #AD0B1F; }
	.red:active { border-image: 4 stretch url("https://dl.dropboxusercontent.com/u/115270/XDDPS/btn-suite/btn_stretch_red_down.png"); }
	.red:active span { background: #7F0017; }

	.red.disabled { border-image: 4 stretch url("https://dl.dropboxusercontent.com/u/115270/XDDPS/btn-suite/btn_stretch_red_disabled.png"); }
	.red.disabled span { background: #BE002A; color: #FF9999; }

dabblet.html

<h1>XD Button Test Suite for DPS</h1>

<div class="context library" ontouchstart="">
	<h2>iOS Library Background #333</h2>
	<div class="btn regular"><span>Free</span></div>
	<div class="btn regular disabled"><span>Disabled</span></div>
	<div class="btn blue"><span>Read Article</span></div>
	<div class="btn blue disabled"><span>Offline</span></div>
	<div class="btn red"><span>Remove</span></div>
	<div class="btn red disabled"><span>Disabled</span></div>

</div>

dabblet.js

// alert('Hello world!');

settings.json

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