Untitled

dabblet.css

.b-sc-button {
position: relative;
overflow: hidden;
width: 40px;
height: 40px;
background: #fa892a; /* Old browsers */
background: -moz-linear-gradient(top, #fa892a 0%, #f93402 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fa892a), color-stop(100%,#f93402)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fa892a 0%,#f93402 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fa892a 0%,#f93402 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fa892a 0%,#f93402 100%); /* IE10+ */
background: linear-gradient(to bottom, #fa892a 0%,#f93402 100%); /* W3C */
border-radius: 20px;
cursor: pointer;
}
.b-sc-button:hover {

background: #fa6d01; /* Old browsers */
background: -moz-linear-gradient(top, #fa6d01 0%, #f92100 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fa6d01), color-stop(100%,#f92100)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fa6d01 0%,#f92100 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fa6d01 0%,#f92100 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fa6d01 0%,#f92100 100%); /* IE10+ */
background: linear-gradient(to bottom, #fa6d01 0%,#f92100 100%); /* W3C */
	box-shadow: 0 0 3px rgba(0,0,0,.5) 
}
.b-sc-button::before {
	content: '';
	position: absolute;
}

.b-sc-button::after {
	content: '';
	position: absolute;
}
.b-sc-button_play::before {
	width: 16px;
	height: 16px;
	background-color: #FFF;
	left: 14px;
	top: 12px;
	-webkit-transform:rotate(45deg);

	box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
}
.b-sc-button_play::after {
	width: 20px;
	height: 40px;
	background: inherit;
	left: 
	0;
	top: 10px;
	-webkit-transform: translateX(-50%) rotateY(40deg);


}




.b-sc-button_pause::before {
	width: 5px;
	height: 16px;
	background-color: #FFF;
	left: 14px;
	top: 12px;
	box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
}

.b-sc-button_pause::after {
	width: 5px;
	height: 16px;
	background-color: #FFF;
	right: 14px;
	top: 12px;
	box-shadow: inset 1px 1px 0 rgba(0,0,0,.1_);

}

.b {
	width: 40px;
	height: 40px;
	background-color: green;
	-webkit-transform: rotateX(180deg) translateZ(50px);


}

dabblet.html

<div class="b-sc-button b-sc-button_play"></div>
<p/>
<div class="b-sc-button b-sc-button_pause"></div>
<p/>
<div class="b"></b>

settings.json

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