New Dialog

dabblet.css

/**
 * New Dialog
 */

/* dabblet only */
* { margin:0; padding:0; font-family:inherit }
body { background:#444; font-family:'proxima nova' }


#dialog { margin:5% auto; width:426px; padding:32px;
	border-radius:8px; background:#f7f7f7;
	background:linear-gradient(top, rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
	box-shadow: 0 5px 0 0 rgba(128, 128, 128, .8), 0 3px 32px 0 rgba(0, 0, 0, .5) }
	
#dialog #close { float:right; margin:-16px -16px 0 0;
	width:11px; height:12px; border:none; text-indent:-999px;
	background:url('http://f.cl.ly/items/0u2u262A3F223k47441F/sprite.png') -394px -71px;
	cursor:pointer }
				 
#dialog .big-button { border:none; padding:.5em 1em; border-radius:6px;
	font-size:20px; color:#fff; color:rgba(255,255,255,.9);
	text-shadow:0 -1px 1px rgba(0,0,0,.2);
	background:#4bade3;
	background:linear-gradient(top, rgb(135,203,245) 0%,rgb(108,189,240) 38%,rgb(65,169,224) 53%,rgb(15,156,217) 100%);
	box-shadow:inset 0 -1px 3px 0 rgba(0,0,0,.3), 0 2px 1px 0 #fff;
	border:1px solid rgba(255,255,255,.8); cursor:pointer }
#dialog .big-button:hover { background:#5db9e;
	background:linear-gradient(top, rgb(137,205,247) 0%,rgb(110,191,242) 38%,rgb(67,171,226) 53%,rgb(17,158,219) 100%) }


#dialog .big-button:active { background:linear-gradient(top, rgb(125,193,235) 0%,rgb(98,179,230) 42%,rgb(55,159,214) 57%,rgb(5,146,207) 100%);
	box-shadow:inset 0 -1px 0px 0 rgba(0,0,0,.3), 0 2px 1px 0 #fff, inset 0 1px 4px 0 rgba(0,0,0,.2) }

dabblet.html

<form id="dialog">
<button id="close">Close</button>
<button class="big-button">Add it</button>
</form>

settings.json

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