<div class="btn-holder">
  <p class="intro-text">Press the buttons</p>
  <button
    id="play-pause"
    onclick="changeStyle('play-pause')"
    aria-label="Play/Pause Button."
    class="btn neumorphic"
  >
    <span class="icon">
      <i id="play" class="material-icon">
        play_arrow
      </i>
      
      <i id="pause" class="material-icon">
        pause
      </i>
    </span>
  </button>
  
  <button
    id="shuffle-btn"
    onclick="changeStyle('shuffle-btn')"
    aria-label="Shuffle Button."
    class="btn neumorphic"
  >
    <i id="shuffle" class="material-icon">
      shuffle
    </i>
  </button>
</div>

/* An import for use of Material icons */
@import url(//fonts.googleapis.com/icon?family=Material+Icons);

body{
  background-color: #6ec7ff;
}

.btn-holder{
  display: block;
  margin: 0 auto;
  margin-top: 64px;
  text-align: center;
}

.intro-text{
  margin-bottom: 48px;
  font-family: 'Quicksand', sans-serif;
  color: white;
  font-size: 18px;
}

.btn{
  width: 110px;
  height: 110px;
  font-size: 30px;
  border-radius: 30px;
  border: none;
  color: white;
  vertical-align: top;
  -webkit-transition: .6s ease-in-out;
  transition: .6s ease-in-out;
}

.btn:hover{
  cursor: pointer;
}

.btn:focus{
  /*  This is just so extra styles don't get in the way, 
      our border will take care of focus!  */
  outline: none;
}

/* Gives the buttons some breathing room */
.btn:first-of-type{
  margin-right: 30px;
}

/* Important stuff for neumorphic styling */
.neumorphic{
  /*  Background is the background color inside button  */
  background: linear-gradient(145deg, #76d5ff, #63b3e6);
  
  /*  The shadow around the buttons which make them look
      vacuum-formed */
  box-shadow: 30px 30px 40px #1e7689,
            -30px -30px 40px #7fe5ff;
  border: 3px solid rgba(255, 255, 255, .4);
}

/* How the buttons look when pressed down */
.neumorphic-pressed{
  background: linear-gradient(145deg, #63b3e6, #76d5ff);
  -webkit-box-shadow: inset 15px 15px 20px -20px rgba(0,0,0,.5);
  -moz-box-shadow: inset 15px 15px 20px -20px rgba(0,0,0,.5);
  box-shadow: inset 15px 15px 20px -20px rgba(0,0,0,.5);
}

/* How the buttons behave when hovered over or focused on - this allows us to get rid of the default outline and indicate focus ourselves */
.neumorphic:focus, .neumorphic:hover, .neumorphic:focus, .neumorphic:hover, .neumorphic-pressed:focus, .neumorphic-pressed:hover {
  border: 3px solid rgba(46, 74, 112, .75);
}

/* Some stuff for Material icons, you can ignore this */
.material-icon {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 32px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}

#pause {
  color: #143664;
  display: none;
}

// Toggles the style of the neumorphic button
function changeStyle(btnPressed) {
  var btn = document.getElementById(btnPressed);
  btn.classList.toggle("neumorphic");
  btn.classList.toggle("neumorphic-pressed");
  
  // Figures out which function to call from which button was pressed
  if (btnPressed === 'play-pause') {
    play();
  } else if (btnPressed === 'shuffle-btn') {
    shuffle();
  }
}

// Toggles the visibility of the play/pause icon
function play() {
  var playBtn = document.getElementById('play');
  var pauseBtn = document.getElementById('pause');
  
  if (playBtn.style.display === 'none') {
    playBtn.style.display = 'block';
    pauseBtn.style.display = 'none';
  } else {
    playBtn.style.display = 'none';
    pauseBtn.style.display = 'block';
  }
}

// Toggles the style of the shuffle indicator
function shuffle() {
  var shuffleBtn = document.getElementById('shuffle-btn');
  
  if (shuffleBtn.style.color == 'white' || shuffleBtn.style.color == '') {
    shuffleBtn.style.color = '#143664';
  } else {
    shuffleBtn.style.color = 'white';
  }
}