<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>

  <button class="btn volume-control">
    <div class="icon-container">
      <svg class="icon plus">
        <use xlink:href="#plus"></use>
      </svg>
    </div>
    <div class="icon-container">
      <svg class="icon minus">
        <use xlink:href="#minus"></use>
      </svg>
    </div>
  </button>

  <button class="btn social">
    <div class="icon-container">
      <a href="https://twitter.com/DevLoop01" target="_blank"></a>
      <svg class="icon twitter">
        <use xlink:href="#twitter"></use>
      </svg>
    </div>
  </button>

  <button class="btn social">
    <div class="icon-container">
      <a href="https://codepen.io/dev_loop/" target="_blank"></a>
      <svg class="icon codepen">
        <use xlink:href="#codepen"></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>
  <symbol id="minus" viewBox="0 0 448 512">
    <path d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33
          32-32v-32c0-17.67-14.33-32-32-32z" />
  </symbol>
  <symbol id="twitter" viewBox="0 0 512 512">
    <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452
          0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568
          130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3
          27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431
          13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258
          216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502
          12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273
          41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" />
  </symbol>
  <symbol id="codepen" viewBox="0 0 512 512">
    <path d="M502.285 159.704l-234-156c-7.987-4.915-16.511-4.96-24.571 0l-234 156C3.714 163.703 0 170.847 0
          177.989v155.999c0 7.143 3.714 14.286 9.715 18.286l234 156.022c7.987 4.915 16.511 4.96 24.571
          0l234-156.022c6-3.999 9.715-11.143 9.715-18.286V177.989c-.001-7.142-3.715-14.286-9.716-18.285zM278
          63.131l172.286 114.858-76.857 51.429L278 165.703V63.131zm-44 0v102.572l-95.429 63.715-76.857-51.429L234
          63.131zM44 219.132l55.143 36.857L44 292.846v-73.714zm190 229.715L61.714 333.989l76.857-51.429L234
          346.275v102.572zm22-140.858l-77.715-52 77.715-52 77.715 52-77.715 52zm22 140.858V346.275l95.429-63.715 76.857
          51.429L278 448.847zm190-156.001l-55.143-36.857L468 219.132v73.714z" />
  </symbol>

</svg>

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  &:focus {
    outline: none;
  }
  &::-webkit-input-placeholder {
    color: #222;
  }
  &::-moz-placeholder {
    color: #222;
  }
}

$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,
    a {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    a {
      z-index: 10;
    }
    .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%);
        }
      }
    }
    &.volume-control {
      height: 160px;
      border-radius: 50px;
      &::after {
        border-radius: 50px;
      }
      .icon-container {
        height: 50%;
        &:last-child {
          transform: translateY(100%);
        }
        &:active {
        }
      }
      .icon {
        width: 1.6rem;
        height: 1.6rem;
        &.plus {
          transform: translate(-50%, -50%);
        }
        &.minus {
          transform: translate(-50%, -50%);
        }
      }
    }
  }
}

console.clear();

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

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