body {
  height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: left;
}

#button-group {
  height: 50px;
  margin-bottom: 5%;
}
#button-group button {
  background: white;
  height: 50px;
  width: 50px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  box-shadow: 0 7px 12px 1px rgba(0, 0, 0, 0.07);
  color: rgba(0, 0, 0, 0.65);
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: absolute;
  transition: 0.3s transform cubic-bezier(0.22, -0.57, 0.51, 1.07), 0.2s 0.1s opacity, 0.15s background-color ease-in-out, 0.3s box-shadow;
}
#button-group button:hover {
  box-shadow: 0 7px 12px 1px rgba(0, 0, 0, 0.15);
}
#button-group button:focus {
  outline: none;
}
#button-group button.primary {
  background: #2196f3;
  border-color: #1976D2;
  color: white;
  z-index: 11;
}
#button-group button i {
  transition: transform 0.3s;
}
#button-group button:not(.primary) {
  opacity: 0;
}
#button-group.active button.primary i {
  transform: rotate(45deg);
}
#button-group.active button:not(.primary):nth-of-type(1) {
  transform: translateY(0px);
  transition: 0.15s 0s transform cubic-bezier(0.33, 0.16, 0.26, 1.72), 0.1s opacity, 0.15s background-color ease-in-out, 0.3s box-shadow;
  opacity: 1;
  z-index: 10;
}
#button-group.active button:not(.primary):nth-of-type(2) {
  transform: translateY(-65px);
  transition: 0.25s 0.015s transform cubic-bezier(0.33, 0.16, 0.26, 1.72), 0.1s opacity, 0.15s background-color ease-in-out, 0.3s box-shadow;
  opacity: 1;
  z-index: 9;
}
#button-group.active button:not(.primary):nth-of-type(3) {
  transform: translateY(-130px);
  transition: 0.35s 0.03s transform cubic-bezier(0.33, 0.16, 0.26, 1.72), 0.1s opacity, 0.15s background-color ease-in-out, 0.3s box-shadow;
  opacity: 1;
  z-index: 8;
}
#button-group.active button:not(.primary):nth-of-type(4) {
  transform: translateY(-195px);
  transition: 0.45s 0.045s transform cubic-bezier(0.33, 0.16, 0.26, 1.72), 0.1s opacity, 0.15s background-color ease-in-out, 0.3s box-shadow;
  opacity: 1;
  z-index: 7;
}
#button-group.active button:not(.primary):nth-of-type(5) {
  transform: translateY(-260px);
  transition: 0.55s 0.06s transform cubic-bezier(0.33, 0.16, 0.26, 1.72), 0.1s opacity, 0.15s background-color ease-in-out, 0.3s box-shadow;
  opacity: 1;
  z-index: 6;
}
#button-group.active button:not(.primary):nth-of-type(6) {
  transform: translateY(-325px);
  transition: 0.65s 0.075s transform cubic-bezier(0.33, 0.16, 0.26, 1.72), 0.1s opacity, 0.15s background-color ease-in-out, 0.3s box-shadow;
  opacity: 1;
  z-index: 5;
}