The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */
body {
	padding: 50px;
}
input {
	display: none;
}
label {
	display: block;
	position: relative;
	box-sizing: border-box;
	height: 48px;
	width: 48px;
	background: white;
}
label:before {
	position: absolute;
	content: '';
	display: block;
	top: 0;
	bottom: 0;
	box-sizing: border-box;
	border-left: 48px solid black;
	border-top: 0px solid transparent;
	border-bottom: 0px solid transparent;
	transition: border-width 1s ease-in-out;
}
label:after {
	position: absolute;
	content: '';
	display: block;
	width: 12px;
	height: 48px;
	background: white;
	left: 50%;
	margin-left: -6px;
	transition: width 1s ease-in-out, margin-left 1s ease-in-out;
}
:checked + label:before {
	border-left: 48px solid black;
	border-top-width: 24px;
	border-bottom-width: 24px;
}
:checked + label:after {
	width: 0;
	margin-left: 0;
}

dabblet.html

<input type="checkbox" id="playpause" />
<label for="playpause"></label>

dabblet.js

// alert('Hello world!');

settings.json

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