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;
	display: block;
	margin: 30px 0;
}
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, #trash {
	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, #light::before, #trash::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;
}
#light {
	color            : #333;
	border           : 1px solid #b46c15;
	box-shadow       : inset 0 1px 0 #f43837, 0 1px 0 #de3a39, 0 8px 0 #6d0607, 0 9px 0 #7d1617;
	text-shadow      : 1px 1px 2px rgba(255, 255, 255, 0.4);
	background-image : linear-gradient(bottom, #ba1211 0%, #e21615 55%);
}
#light::before {
 	background-position : 9px -190px, left top;
}
#trash {
	border           : 1px solid #9ca53a;
	box-shadow      : inset 0 1px 0 #c8dc61, 0 1px 0 #cbde75, 0 8px 0 #4b5806, 0 9px 0 #9ca53a;
	background-image: linear-gradient(bottom, #809423 50%, #9eb62c 50%);
}
#trash::before {
 	background-image    : url(http://dl.dropbox.com/u/1047202/technologic-icons.png), radial-gradient(left, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.45) 120%);
 	background-position : 9px -390px, left top;
}
#trash:active {
	margin-top      : 35px;
	box-shadow      : inset 0 1px 0 #c8dc61, 0 1px 0 #cbde75, 0 3px 0 #4b5806, 0 4px 0 #9ca53a;
}
#trash:active::after {
	bottom     : 3px;
	height     : 5px;
	box-shadow : 0 7px 7px 2px rgba(0, 0, 0, 0.5);
}



.no-bggradient #trash {
	background: url(../img/gradient-button.png) no-repeat;
}

dabblet.html

<button id=drag type=button>drag it</button>
<button id=light type=button>think it</button>
<button id=trash type=button>trash it</button>

settings.json

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