begin button styles

dabblet.css

 
    body, p, div, form, label, input{
    /* some reset */
        margin:0;
        padding:0;
        font-family:Verdana, Geneva, sans-serif;
        font-size:small;
        color:#666;
        background: #3a5875
        }
    .wrapper{
        width:400px;
        margin:0 auto;
        padding:100px;
    }
    
    
/* begin button styles */


#square-buttons {
	display: inline;
	position: absolute;
	left: 108px;
	width: auto;
	top: 151px;
	margin: 0;
	height: auto;
	cursor: default;
}

.square-button {
	width: 36px;
	height: 32px;
	color: #666;
	text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.59);
	font-size: 12px;
	display: inline;
	position: relative;
	margin: 0px 0px 0px 0px;
	background: #ECECEC;
	outline: none;
	border: 1px solid #D8D8D8;
	border-bottom: 1px solid #CCC;
	border-radius: 3px;
	cursor: pointer;
	box-shadow: 0px 2px 2px rgba(0,0,0,0.027), 
		inset 0px 1px 0px rgba(255,255,255,0.69),
		inset 0px -1px 0px rgba(0,0,0,0.0187),
		inset 0px 1px 13px rgba(255,255,255,0.57);
}

.square-button:active, 
#selected{
	color: dimGray;
	text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.53);
	border: 1px solid #D2D2D2;
	border-bottom: 1px solid #D8D8D8;
	background: #888888;
	box-shadow: 0px 1px 0px rgba(255,255,255,0.58),
		inset 0px 1px 6px rgba(0,0,0,0.09),
nset 0px -14px 13px rgba(255,255,255,0.20);
}


.square-button:hover {
	color: #888;
	text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.69);
	-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.027), inset 0px 1px 0px rgba(255,255,255,0.69), inset 0px -1px 0px rgba(0,0,0,0.0187), inset 0px 14px 13px rgba(255,255,255,0.75);
	-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.027), inset 0px 1px 0px rgba(255,255,255,0.69), inset 0px -1px 0px rgba(0,0,0,0.0187), inset 0px 14px 13px rgba(255,255,255,0.75);
	-o-box-shadow: 0px 2px 2px rgba(0,0,0,0.027), inset 0px 1px 0px rgba(255,255,255,0.69), inset 0px -1px 0px rgba(0,0,0,0.0187), inset 0px 14px 13px rgba(255,255,255,0.75);
	box-shadow: 0px 2px 2px rgba(0,0,0,0.027), inset 0px 1px 0px rgba(255,255,255,0.69), inset 0px -1px 0px rgba(0,0,0,0.0187), inset 0px 14px 13px rgba(255,255,255,0.75);

}


.square-button.next::before {
	content: 'mb';
	text-indent: -9999px;
	display: block;
	position: relative;
	width: 16px;height: 16px;
	background: transparent url(http://icondeposit.wdfiles.com/local--files/code%3A3/bui.png) -43px -6px no-repeat;
}


.square-button.previous::before {
	content: 'mb';
	text-indent: -9999px;
	display: block;
	position: relative;
	width: 16px;
	height: 16px;
	background: transparent url(http://icondeposit.wdfiles.com/local--files/code%3A3/bui.png) -7px -6px no-repeat;
}


    
  

dabblet.html

<div class="wrapper">
	<div id="square-buttons">
		<button class="square-button previous" id="selected"></button>
		<button class="square-button next"></button>
	</div>
</div>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}