<div class="container">
  <div class="flex">
    <input type="checkbox" class="cb" id="cb1">
    <label for="cb1" class="button b1">
      <i class="far fa-3x fa-kiss nc"></i>
      <i class="far fa-3x fa-kiss-wink-heart checked"></i>
    </label>
    </input>
    <input type="checkbox" class="cb" id="cb2">
    <label for="cb2" class="button b2">
      <i class="far fa-3x fa-heart nc"></i>
      <i class="fas fa-3x fa-heart checked"></i>
    </label>
    </input>
    <input type="checkbox" class="cb" id="cb3">
    <label for="cb3" class="button b3">
      <i class="fas fa-3x fa-unlock nc"></i>
      <i class="fas fa-3x fa-lock checked"></i>
    </label>
    </input>
  </div>
  <div class="flex flex-center">
    <div class="weird flex flex-center" id="outer">
      <input type="checkbox" class="cb" id="cb4">
      <label for="cb4" class="toggle" onclick="toggleClasses()">
        <div class="toggle-inner">
        </div>
      </label>
      </input>
    </div>
  </div>
</div>

html,
body {
  background-color: #cdcdcd;
  background-color: #d3d4de;
  height: 100%;
  display: grid;
}

input[type="checkbox"] {
  display: none;
}

.container {
  margin: auto;
}

.flex {
  margin: auto;
  display: flex;
}

.flex-center {
  align-items: center;
  justify-content: space-around;
}

label {
  cursor: pointer;
}

.button {
  height: 100px;
  margin: 60px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  user-select: none;
}

:focus {
  -webkit-tap-highlight-color: transparent;
  outline: none !important;
}

.b1 {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2),
    -8px -8px 20px rgba(255, 255, 255, 0.6);
}

.cb:checked + .b1 {
  box-shadow: inset 8px 8px 10px rgba(0, 0, 0, 0.2),
    inset -8px -8px 10px rgba(255, 255, 255, 0.6);
}

.b2 {
  border-radius: 15px;
  box-shadow: 12px 12px 26px rgba(0, 0, 0, 0.2),
    -12px -12px 26px rgba(255, 255, 255, 0.6);
}

.cb:checked + .b2 {
  box-shadow: inset 12px 12px 16px rgba(0, 0, 0, 0.2),
    inset -12px -12px 16px rgba(255, 255, 255, 0.6);
}

.b3 {
  border-radius: 25px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 16px 16px 30px rgba(0, 0, 0, 0.2),
    -16px -16px 30px rgba(255, 255, 255, 0.6);
}

.cb:checked + .b3 {
  box-shadow: inset 16px 16px 30px rgba(0, 0, 0, 0.2),
    inset -16px -16px 30px rgba(255, 255, 255, 0.6);
}

.cb:checked + label .nc {
  display: none;
}

.cb:not(:checked) + label .checked {
  display: none;
}

i {
  color: #444;
  color: #353857;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  transition: all 0.5s ease;
}

.cb:checked + .b1.glow i {
  color: #e3a34f;
  text-shadow: 0 0 50px rgba(255, 174, 69, 0.9);
}

.cb:checked + .b3.glow i {
  color: #40c99e;
  text-shadow: 0 0 50px rgba(82, 255, 200, 0.9);
}

.cb:checked + .b2.glow i {
  color: #ff4d61;
  text-shadow: 0 0 50px rgba(201, 64, 80, 0.9);
}

/* animation test zone */

.toggle {
  border-radius: 100px;
  width: 130px;
  max-height: 80px;
  padding: 16px;
  /*   border: 1px solid rgba(255, 255, 255, 0.2); */
  box-shadow: inset 5px 5px 6px rgba(0, 0, 0, 0.2),
    inset -5px -5px 6px rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  /*   align-items: center; */
}

.cb:checked + .toggle > .toggle-inner {
  transform: translateX(75px);
}

.toggle-inner {
  width: 56px;
  height: 56px;
  border-radius: 50px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.25);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3),
    -2px -2px 4px rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease-out;
}

.weird {
  width: 200px;
  height: 80px;
  padding: 40px 25px;
  border-radius: 100px;
  transition: box-shadow 2s ease;
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2),
    -8px -8px 20px rgba(255, 255, 255, 0.6);
}

/* the transitions happen at the same time, would be nice if the inset transition was staggered to start halfway through */
.weird-move {
  box-shadow: 8px 8px 20px rgba(255, 255, 255, 0.6),
    -8px -8px 20px rgba(0, 0, 0, 0.2), inset 6px 6px 12px rgba(0, 0, 0, 0.2),
    inset -6px -6px 12px rgba(255, 255, 255, 0.4);
}

/* checkbox for temp testing */
.cb5 {
  display: block !important;
}

var switchButton = document.getElementById("cb4");
var switchOuter = document.getElementById("outer");
var buttons = document.getElementsByClassName("button");

function toggleClasses() {
  console.log(this.buttons);
  if (this.switchButton.checked == false) {
    this.switchOuter.classList.add("weird-move");
    for (i = 0; i < this.buttons.length; i++) {
      this.buttons[i].classList.add("glow");
    }
  } else {
    this.switchOuter.classList.remove("weird-move");
    for (i = 0; i < this.buttons.length; i++) {
      this.buttons[i].classList.remove("glow");
    }
  }
}