Buttons

dabblet.css

/**
 * 
 Buttons
 */

button {
	font           : bold 35px Arial, sans-serif;
	width          : 230px;
	padding        : 15px 8px 15px 60px;
	position       : relative;
	border-radius  : 10px;
	letter-spacing : -2px;
}
button::after {
	content    : "";
	left       : 0;
	bottom     : -5px;
	z-index    : -5;
	width      : 96%;
	height     : 10px;
	margin     : 0 2%;
	position   : absolute;
	box-shadow : 0 7px 7px 2px rgba(0, 0, 0, 0.5);
}
#drag {
	color            : #333;
	border           : 1px solid #b46c15;
	box-shadow       : inset 0 1px 0 #e0961b, 0 1px 0 #7e4808, 0 8px 0 #8b4d02, 0 9px 0 #583307;
	text-shadow      : 1px 1px 2px rgba(255, 255, 255, 0.4);
	background-image : linear-gradient(bottom, #a56213 0%, #d18219 55%);
}
#drag::before {
	content             : "";
	z-index             : 5;
	width               : 71px;
	height              : 71px;
	position            : absolute;
	left                : 6px;
	top                 : 0;
 	box-shadow          : 1px 0 0 rgba(0, 0, 0, 0.4)
 	border-right        : 2px solid rgba(0, 0, 0, 0.2);
 	background-image    : url(http://dl.dropbox.com/u/1047202/technologic-icons.png), linear-gradient(-60deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.25) 100%);
 	background-repeat   : no-repeat, no-repeat;
 	background-position : 9px 10px, left top;
}

dabblet.html

<button id=drag type=button>drag it</button>

settings.json

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