<div class="btn-holder">
  <p class="intro-text">Press the buttons</p>
    aria-label="Play/Pause Button."
    class="btn neumorphic"
    <span class="icon">
      <i id="play" class="material-icon">
      <i id="pause" class="material-icon">
    aria-label="Shuffle Button."
    class="btn neumorphic"
    <i id="shuffle" class="material-icon">
/* An import for use of Material icons */
@import url(//fonts.googleapis.com/icon?family=Material+Icons);

  background-color: #6ec7ff;

  display: block;
  margin: 0 auto;
  margin-top: 64px;
  text-align: center;

  margin-bottom: 48px;
  font-family: 'Quicksand', sans-serif;
  color: white;
  font-size: 18px;

  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;

  cursor: pointer;

  /*  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 */
  margin-right: 30px;

/* Important stuff for neumorphic styling */
  /*  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 */
  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);
  // Figures out which function to call from which button was pressed
  if (btnPressed === 'play-pause') {
  } else if (btnPressed === 'shuffle-btn') {

// 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';

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.