:root{
	--size    : 80px;
	--color   : #000000; 
	--bgcolor : #ffcc00; 
}

.btn-40{ --size:40px; }
.btn-50{ --size:50px; }
.btn-60{ --size:60px; }
.btn-70{ --size:70px; }

.btn-audio{ display:inline-block; width:var(--size); height:var(--size); max-width:240px; max-height:240px; 
		   	margin:0; padding:0; overflow:hidden; position: relative;
		   	vertical-align:middle; outline:0; border:0; border-radius:50%; transition:235ms ease;
		   	background-color: var(--bgcolor); cursor: pointer; 
} 
.btn-audio::before {
			content: ''; position: absolute; top:0; left: 0; width: 100%; height: 100%;
			display: block; position: relative;  
			clip-path: polygon( 40% 28%, 40% 70%, 70% 50%);
			background: var(--color);
}
.btn-audio.play::before{ content:none;  }

.btn-audio-bars { color:var(--color); position:relative; width:50%; height:50%; margin:15% 0 0 25%; }
.btn-audio-bars .bar  { position:absolute; bottom:0; display:block; width:20%; background:var(--color);
						transition:230ms ease; animation-play-state:running}
								
.btn-audio-bars .bar:nth-child(1){ left:0%;   height:20%;animation:bounceBar 2.8s ease .2s infinite alternate }
.btn-audio-bars .bar:nth-child(2){ left:27%;  height:45%;animation:bounceBar 2.2s ease .1s infinite alternate }
.btn-audio-bars .bar:nth-child(3){ left:53%;  height:8%; animation:bounceBar 2.6s ease .1s infinite alternate }
.btn-audio-bars .bar:nth-child(4){ left:80%;  height:68%;animation:bounceBar 2.7s ease .4s infinite alternate }

.btn-audio      .bar{ animation-play-state:paused;  opacity:0; }
.btn-audio.play .bar{ animation-play-state:running; opacity:1; }

@keyframes bounceBar{
	0% {height:20%}   10%{height:50%}   20%{height:20%}   30%{height:70%}   40%{height:10%}   50%{height:60%}
	60%{height:40%}   70%{height:100%}  80%{height:20%}   90%{height:50%}  100%{height:100%}
}