<button onclick='this.classList.toggle("playing")'>Play/ Pause</button>

@import 'compass/css3';

$d: 5em;

// play triangle size relative to entire button
$s: 45%;

$o: 50% - .5*$s;

// corner rounding, you can change it to 2, 5, 7 pixels
$r: 3px;

$m: $r/.5px;
$b: 35%;

@function round-0() {
	$n: 3;
	$ba: 360deg/$n;
	$va: ($n - 2)*180deg/$n;
	$da: 90deg - .5*$va;
	$vx: ();
	$in: ();
	$p: ();
	
	@for $i from 0 to $n {
		$ca: $i*$ba - 90deg;
		$vx: append($vx, (50% + 50%*cos($ca) 50% + 50%*sin($ca)));
		$in: append($in, ((50% + #{calc(50% - #{$r/sin(.5*$va)})}*#{cos($ca)}) (50% + #{calc(50% - #{$r/sin(.5*$va)})}*#{sin($ca)})));
	}

	@for $j from 1 through 2 {
		$k: .5/(3 - $j);
		$md: 
			$k*nth(nth($vx, $j), 1) + (1 - $k)*nth(nth($vx, $j + 1), 1)
			$k*nth(nth($vx, $j), 2) + (1 - $k)*nth(nth($vx, $j + 1), 2);
		
		@for $i from 0 through $m {
			$ca: $i*$j*$da/$m - 90deg + ($j - 1)*($ba - $da);

			$p: $p, 
				calc(#{nth(nth($in, $j), 1)} + #{$r*cos($ca)})
				calc(#{nth(nth($in, $j), 2)} + #{$r*sin($ca)})
		}

		@for $i from 0 through $m {
			$p: $p, $md
		}
	}
	
	@return $p
}

@function round-1() {
	$in: 
		calc(#{100% - $b} + #{$r}) $r, 
		calc(100% - #{$r}) $r, 
		calc(100% - #{$r}) calc(100% - #{$r}), 
		calc(#{100% - $b} + #{$r}) calc(100% - #{$r});
	$p: ();
	
	@for $j from 0 to 4 {
		$ma: -135deg + $j*90deg;
		$da: 45deg;
		
		@for $i from 0 through $m {
			$ca: $ma - $da + $i*2*$da/$m;
			
			$p: $p, 
				calc(#{nth(nth($in, $j + 1), 1)} + #{$r*cos($ca)})
				calc(#{nth(nth($in, $j + 1), 2)} + #{$r*sin($ca)})
		}
	}
	
	@return $p
}

body {
	display: grid;
	place-content: center;
	margin: 0;
	height: 100vh;
}

button {
	overflow: hidden;
	position: relative;
	border: none;
	width: $d; height: $d;
	border-radius: 50%;
	box-shadow: 
		0 1px 2.2px rgba(#000, .051), 
		0 2.3px 5.3px rgba(#000, .059), 
		0 4.4px 10px rgba(#000, .06), 
		0 7.8px 17.9px rgba(#000, .059), 
		0 14.6px 33.4px rgba(#000, .059), 
		0 35px 80px rgba(#000, .07);
	background: #f4471f;
	font-size: 1.25em;
	white-space: nowrap;
	text-indent: $d;
	filter: grayscale(1);
	transition: .5s;
	cursor: pointer;
	
	&:before, &:after {
		--sgn: 1;
		position: absolute;
		left: $o; top: $o;
		width: $s; height: $s;
		transform: 
			rotate(-30deg)
			scalex(var(--sgn)) 
			translate(-.2px) /* gap issue correction */;
		background: #fff;
		clip-path: polygon(round-0());
		transition: inherit;
		content: ''
	}
	
	&:after { --sgn: -1 }
	
	&:focus, &:hover {
		outline: solid 0 transparent;
		filter: none;
	}
	
	&.playing {
		&:before, &:after {
			transform: rotate(0deg) scale(calc(var(--sgn)*.7), .7);
			clip-path: polygon(round-1())
		}
	}
}