Animated play / pause button

by Konstantin Rouda

HTML

<section class="c-container">
  <button type="button" class="o-btn o-btn--play" id="play-btn" aria-label="play"></button>
</section>

CSS

HTML {
  /*using system font-stack*/
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 115%; /*~18px*/
  font-size: calc(12px + (25 - 12) * (100vw - 300px) / (1300 - 300) );
  line-height: 1.5;
  box-sizing: border-box;
}

BODY {
  color: #3a3d40;
}

*, *::before, *::after {
  box-sizing: inherit;
  color: inherit;
}

/*Actual Style*/
.c-container {
  max-width: 50vw;
  margin: 2rem auto;
}

.o-btn {
  min-height: 4.625rem;
  background: none;
  border: none;
  cursor: pointer;
}

.o-btn--play {
  border-width: 2.3125rem 0 2.3125rem 3.75rem;
  border-style: solid;
  border-color: transparent;
  border-left-color: currentcolor;
  outline: none;
  will-change: border-width;
  transition: border-width .1s;
}

.o-btn--play.is-paused {
  border-width: 0 1.25rem 0 1.25rem;
  border-color: currentcolor;
}




/*Pixel version*/
/*

.o-btn {
  //max-width: 3.625rem;
  min-height: 74px;
  background: none;
  border: none;
  cursor: pointer;
}

.o-btn--play {
  border-width: 37px 0 37px 60px;
  border-style: solid;
  border-color: transparent;
  border-left-color: currentcolor;
  outline: none;
  will-change: border-width;
  transition: border-width .1s;
}

.o-btn--play.is-paused {
  border-width: 0 20px 0 20px;
  border-color: currentcolor;
}

*/

JavaScript

;(function () {
  "use strict";
  
  const btn = document.getElementById("play-btn");
  
  const PAUSE_CLASS = "is-paused";
  
  const ARIA_VALUE_PLAY = "play"; 
  const ARIA_VALUE_PAUSE = "pause";
  
  btn.addEventListener("click", btnOnClick);
  
  function btnOnClick (e) {
    const currentBtn = e.target;
    currentBtn.classList.toggle(PAUSE_CLASS);
    
    const ariaLabelCurrentValue = currentBtn.getAttribute("aria-label") === ARIA_VALUE_PLAY ? ARIA_VALUE_PAUSE : ARIA_VALUE_PLAY;
    
    currentBtn.setAttribute("aria-label", ariaLabelCurrentValue);   
  };
  
  /*
     Inspired by article from Css tricks:
     https://css-tricks.com/making-pure-css-playpause-button/
  */
  
  
  
})();