Animated Play/Pause/Buffering button in pure CSS

animatedPlayPauseBufferButton.html

<style>
	#playpause-button {
		border: 0px;
		box-sizing: border-box;
		transition: .5s all ease;
		cursor: pointer;
		background: #E46018;
		width: 56px;
		height: 56px;
		margin-right:1rem;
	}
	#playpause-button:after {
		background: #fefefe !important;
		display: block;
		width: 45%;
		height: 45%;
		transition: clip-path 0.25s,  transform 0s;
		clip-path: polygon(15% 15%, 15% 85%, 85% 45%, 85% 45%, 85% 45%, 85% 45%, 85% 45%, 85% 45%, 85% 45%);
		margin: 0px auto;
		content: "";
	}
	#playpause-button[data-state="play"]:after { 
		clip-path: polygon(15% 15%, 15% 85%, 30% 85%, 30% 15%, 70% 15%, 85% 15%, 85% 85%, 70% 85%, 70% 15%);
	}
	#playpause-button:hover {
		background:#db5b15;
	} 
	#playpause-button.buffer {
		background:silver;
	}
	#playpause-button.buffer:after {
		transition: clip-path 0.25s, background 0.5s, transform 20s;
		clip-path: polygon(74% 0, 100% 0, 100% 100%, 74% 100%, 74% 0, 65% 49%, 0 100%, 0 0, 65% 49%);
		transform: rotate(3600deg);
	}
</style>

<button id="playpause-button"></button>

<hr/>
<button id = 'buffer'>Toggle Buffering</button>

<script>
	//THIS CODE IS JUST TO TOGGLE THE CSS CLASSES/DATASETS! THIS DOES NOT CONTROL THE ANIMATIONS!
	document.querySelector("#playpause-button").onclick = ev=>{ ev.target.dataset.state = ev.target.dataset.state=="play"?"pause":"play"; }
	document.querySelector("#buffer").onclick = ev=>{ document.querySelector("#playpause-button").classList.toggle("buffer"); }
</script>