Play Stop button using CSS only

 <style>  
   .loader {display: block; justify-content: center; align-items: center; margin: 0;position: absolute; top: 40%; left: 48%;}  
  #play-button-container , #pause-button-container { display: inline-block; width: 50px; height: 50px; cursor: pointer; opacity: 0.5; }  
  .play-button , .pause-button { display: inline-block; position: absolute; width: 50px; height: 50px; background: #fff; }  
  .play-button-before { clip-path: polygon(0 0, 50% 25%, 50% 75%, 0% 100%); }  
  .play-button-after {clip-path: polygon(50% 25%, 100% 50%, 100% 50%, 50% 75%); }  
  #pause-button-container .pause-button-before { clip-path: polygon(0 0, 30% 0, 30% 100%, 0% 100%); }  
  #pause-button-container .pause-button-after{ clip-path: polygon(70% 0, 100% 0, 100% 100%, 70% 100%) }   
 </style>  
 <div class="loader">  
  <span id="play-button-container" onclick="this.display='none';document.getElementById("pause-button-container").style.display='';">  
   <span class="play-button play-button-before"></span>  
   <span class="play-button play-button-after"></span>  
  </span>  
  <span id="pause-button-container" onclick="this.display='none';document.getElementById("play-button-container").style.display='';">  
   <span class="pause-button pause-button-before"></span>  
   <span class="pause-button pause-button-after"></span>  
  </span>  
 </div>