<div class="container">
  <button class="btn play-pause">
    <div class="icon-container">
      <svg class="icon play">
        <use xlink:href="#play"></use>
      </svg>
    </div>
    <div class="icon-container">
      <svg class="icon pause">
        <use xlink:href="#pause"></use>
      </svg>
    </div>
  </button>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="icons">
  <symbol id="play" viewBox="0 0 448 512">
    <path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" />
  </symbol>
  <symbol id="pause" viewBox="0 0 448 512">
    <path d="M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48
					48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z" />
  </symbol>
  <symbol id="plus" viewBox="0 0 448 512">
    <path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67
					14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33
					32-32v-32c0-17.67-14.33-32-32-32z" />
  </symbol>

</svg>

$bg-color: #f2f2f2;
body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: $bg-color;
}
.icons {
  display: none;
}
button {
  border: 0;
  &:focus {
    border: none;
    outline: 0 !important;
    outline-style: none;
  }
}
.container {
  width: 550px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: space-around;

  .btn {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: $bg-color;
    transition: all 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0px -6px 10px rgba(255, 255, 255, 1),
      0px 4px 15px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    &:after {
      // buttons pseudo element
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      z-index: 2;
    }
    &:active {
      // button state active
      box-shadow: 0 15px 20px rgba(0, 0, 0, 0.02);
      &:after {
        box-shadow: inset 0px -2px 5px rgb(255, 255, 255),
          inset 0px 2px 5px rgba(0, 0, 0, 0.15);
      }
    }
    &.active {
      // button with active class
      &.play-pause {
        .icon {
          &.pause {
            opacity: 1;
            transform: translate(-50%, -50%);
          }
          &.play {
            opacity: 0;
            transform: translate(-50%, 50%);
          }
        }
      }
    }

    .icon-container,
    .icon {
      // svg icons
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: inline-block;
      fill: #868686;
      height: 1.4rem;
      vertical-align: middle;
      width: 1.4rem;
      transition: all 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    &.play-pause {
      // diff buttons
      .icon {
        &.pause {
          opacity: 0;
          transform: translate(-50%, 50%);
        }
      }
    }
  }
}

const buttons = Array.from(document.querySelectorAll("button"));

buttons.forEach((btn) => {
  btn.addEventListener("click", () => {
    btn.classList.toggle("active");
  });
});