<div class="btns-wrapper">
  <div class="btn active">
    <div class="inner-wrapper">
      <i class="material-icons-round">play_arrow</i>
    </div>
  </div>
  <div class="btn">
    <div class="inner-wrapper">
      <i class="material-icons-round">pause</i>
    </div>
  </div>
  <div class="btn">
    <div class="inner-wrapper">
      <i class="material-icons-round">skip_next</i>
    </div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css?family=Material+Icons+Round');

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    background: linear-gradient(318.32deg, #C3D1E4 0%, #DDE7F3 55%, #D4E0ED 100%);
    display: grid;
    place-items: center;
}

.btns-wrapper {
    display: grid;
    grid-auto-flow: column;
    padding: 16px;
    gap: 24px;
    transform: scale(3);
}

.btn {
    width: 62px;
    height: 62px;
    position: relative;
    border-radius: 18px;
    padding: 2px;
    box-shadow: 4px 2px 16px rgba(136, 165, 191, 0.48), -4px -2px 16px #FFFFFF;
  
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    .inner-wrapper {
        width: 100%;
        height: 100%;
        border-radius: 16px;
        transition: all .2s ease-in-out;
        display: grid;
        place-items: center;

        i {
            user-select: none;
            transition: all .2s ease-in-out;
            font-size: 32px;
            position: relative;
            color: rgba(201, 215, 230, 0.8);
            text-shadow: 2px 2px 2px #d6e1ef99, 0 0 0 #000, 2px 2px 2px #d6e1ef00;
        }
    }

}


.btn.active {
    .inner-wrapper {
        box-shadow: inset 3px 3px 7px rgba(136, 165, 191, 0.48), inset -3px -3px 7px #FFFFFF;

        i {
            text-shadow: 1px 1px 1px #d6e1ef99, 0 0 0 #000, 1px 1px 1px #d6e1ef00;
        }

    }
}
View Compiled
const btns = document.querySelectorAll('.btn');

for (let btn of btns) {
	btn.onclick = () => btn.classList.toggle('active');
}




Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://codepen.io/MoustafaJazzar/pen/QaEZBO