CSS Play/Pause button

dabblet.css

/* CSS Play/Pause button */
button.playpause {
	background: none;
	border: 3px solid #ccc;
	border-radius: 50%;
	cursor: pointer;
	display: inline-block;
	height: 39px;
	overflow: hidden;
	position: relative;
	width: 39px;
}

button.playpause:after {
	content: "";
	display: block;
	height: 0;
	position: absolute;
	width: 0;
}

button.playpause.paused:after {
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid #ccc;
	top: 7px;
	left: 13px
}

button.playpause.playing:after {
	border-left: 5px solid #ccc;
	border-right: 5px solid #ccc;
	height: 17px;
	left: 10px;
	top: 8px;
	width: 4px;
}

button.playpause:hover {
	border-color: #C00;
}

button.playpause.paused:hover:after {
	border-left-color: #C00;
}

button.playpause.playing:hover:after {
	border-left-color: #C00;
	border-right-color: #C00;
}

button.playpause:active {
	border-color: #CB0;
}

button.playpause.paused:active:after {
	border-left-color: #CB0;
}

button.playpause.playing:active:after {
	border-left-color: #CB0;
	border-right-color: #CB0;
}

dabblet.html

<button class="playpause paused"></button>
<button class="playpause playing"></button>

settings.json

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