.button-menu {
  cursor: pointer;
  position: absolute;
  z-index: 1;
  background-color: #ffdd00;
  border: 2px solid #1e1e1e;
  color: #1e1e1e;
  font-size: 30px;
  font-weight: 700;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  -webkit-box-shadow: 0px 3px 10px 0px rgba(16, 16, 16, 0.5);
  -moz-box-shadow: 0px 3px 10px 0px rgba(16, 16, 16, 0.5);
  box-shadow: 0px 3px 10px 0px rgba(16, 16, 16, 0.5);
}

.checkbox {
  width: 60px;
  height: 60px;
  opacity: 0;
  z-index: 10;
  cursor: pointer;
}

.option {
  position: absolute;
  background-color: #1e1e1e;
  border: 2px solid #ffdd00;
  color: #ffdd00;
  z-index: -1;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.3s;
  -webkit-box-shadow: 3px 3px 10px 0px rgba(16, 16, 16, 0.5);
  -moz-box-shadow: 3px 3px 10px 0px rgba(16, 16, 16, 0.5);
  box-shadow: 3px 3px 10px 0px rgba(16, 16, 16, 0.5);
}

.checkbox:hover ~ .button-menu,
.checkbox:checked ~ .button-menu {
  background-color: #eccd00;
  scale: 0.98;
  box-shadow: none;
}

.checkbox:not(:checked) ~ .button-menu::before {
  content: "+";
}

.checkbox:checked ~ .button-menu::after {
  content: "-";
  scale: 0.98;
  box-shadow: none;
}

.checkbox:not(:checked) ~ .option {
  box-shadow: none;
}

.option:hover,
.option:active,
.option:focus {
  box-shadow: none;
  scale: 0.98;
}

.checkbox:checked ~ .option-a {
  transition-delay: 0.1s;
  transform: translateY(-90px);
}

.checkbox:checked ~ .option-b {
  transition-delay: 0.2s;
  transform: translateY(-65px) translateX(65px);
}

.checkbox:checked ~ .option-c {
  transition-delay: 0.3s;
  transform: translateX(90px);
}