YouTubesque morphing button

dabblet.css

/**
 * YouTubesque morphing button
 * Requires clip-path with CSS Shapes support, not just url()
 * http://caniuse.com/#feat=css-clip-path
 */

@keyframes play { to {
	-webkit-clip-path: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
	clip-path: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
	/* it should be 50% 100% (one value), but Chrome & Safari are buggy (in different ways), hence the 51 & the duplication */
	background-size: 51% 100%, 51% 100%;
} }

button {
	border: 0;
	width: 1em;
	height: 1em;
	background: linear-gradient(currentColor, currentColor) left,
	            linear-gradient(currentColor, currentColor) right;
	background-size: 42% 100%; /* Set pause bar width here */
	background-repeat: no-repeat;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	animation: play .6s infinite alternate ease-in-out;
	font-size: 500%;
	color: black; /* Change color here, in one place */
}

dabblet.html

<button></button>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}