Player buttons [POC]

by Konstantin Rouda

HTML

<section class="c-buttons-container">
  <!-- PREVIOUS -->
  <button class="c-player__button c-player__button-direction c-player__button-direction--prev" id="btn-previous"></button>
  
<!-- PLAY/PAUSE -->
  <button class="c-player__button c-player__button--play" id="btn-play"></button>
  
  <!-- NEXT -->
  <button class="c-player__button c-player__button-direction c-player__button-direction--next" id="btn-next"></button>
  
<!-- STOP -->
    <button class="c-player__button c-player__button--stop" id="btn-stop"></button>
</section>


<!-- REAL IMAGES -->
<section>
<img src="https://cdn1.imggmi.com/uploads/2019/10/12/f6ab08469a034d560c4282c1a46f403f-full.png" class="c-real-img c-real-img--next"/>


<img src="https://cdn1.imggmi.com/uploads/2019/10/12/38b841f921c402db70c88c96602153f9-full.png" class="c-real-img c-real-img--pause"/>


<img src="https://cdn1.imggmi.com/uploads/2019/10/12/cc401834891bf010b8dc93ed15205817-full.png" class="c-real-img c-real-img--play"/>

<img src="https://cdn1.imggmi.com/uploads/2019/10/12/f08520376c6b9a909c6f26bbe4333f74-full.png" class="c-real-img c-real-img--previous"/>


<img src="https://cdn1.imggmi.com/uploads/2019/10/12/68fbb3182381517259b9b7c35adf9c3e-full.png" class="c-real-img c-real-img--stop"/>
</section>

<!--  -->
<section>
    <!-- NEXT -->
  <button class="c-player__gradient-button c-player__gradient-button-direction c-player__gradient-button-direction--next" id="btn-next"></button>
  
</section>

CSS

*, *::before, *::after {
  box-sizing: border-box;
}

.c-player__button {
    position: relative;
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    cursor: pointer;
    color: rgba(241, 241, 241, 1);
/*     outline: 1px solid yellow; */
}

.c-player__button:focus {
 outline: none; 
}

/*DIRECTION BUTTONS (NEXT / PREVIOUS)*/
.c-player__button-direction::before, 
.c-player__button-direction::after {
    content: "";
    position: absolute;
    top: 50%;
    /* width: 32px; */
    /* height: 22px; */
    /* display: inline-block; */
    transform: translateY(-50%);
    border: 13px solid transparent;
    /* border-left-color: rgb(108, 33, 111); */
    border-left-color: currentColor;
    /* filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .2)); */
    /* vertical-align: middle; */
}

.c-player__button-direction::before {
    left: 3px;
}

.c-player__button-direction:after {
}

.c-player__button-direction--next {
    transform: translateX(15px);
}

.c-player__button-direction--prev {
    transform: translateX(-15px) rotate(-180deg);
}



/*PLAY/PAUSE BUTTON*/
.c-player__button--play, 
.c-player__button--pause {
    width: 20px;
    height: 25px;
    padding: 0;
    border-style: solid;
    transition: border-width .1s;
}

.c-player__button--play {
    /* left: 43px; */
  /*border-width: 10px 0 12px 17px;*/
    border-width: 13px 0 14px 20px;
    border-color: transparent;
    /* border-left-color: rgb(108, 33, 111); */
    border-left-color: currentColor;
}

.c-player__button--pause {
    /* left: 42px; */
    border-width: 0 6px 0 6px;
    /* border-color: rgb(108, 33, 111); */
    border-color: currentColor;
}



/*STOP BUTTON*/
.c-player__button--stop {
  width: 23px;
  height: 23px;
  background: currentColor;
  border-radius: 1px;
  transform: translateX(2rem);
}





/*NOT ESSENTIAL STYLE*/
.c-buttons-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  background: rgb(50, 13,...

JavaScript

;(function () {
	"use strict";
  
  const playBtn = document.getElementById("btn-play");
  
  playBtn.addEventListener("click", onPlayBtnClick);
  
  function onPlayBtnClick (e) {
  		e.currentTarget.classList.toggle("c-player__button--pause");
  }
  
  
})();