<div class="dot-menu">
  <input id="dot-menu" type="checkbox" class="dot-menu__checkbox">
  <label for="dot-menu" class="dot-menu__label"><span>Menu</span></label>
</div>

@mixin text-invisible {
  text-indent: -9999em;
}

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

$dot-menu-size: 60px;
$dot-menu-color: rgba(0, 0, 0, .03);
$dot-menu-color-active: rgba(0, 0, 0, .1);
$dot-menu-dot-color: #3d3d23;
$dot-menu-dot-color-active: #000000;
$dot-menu-dot-size: $dot-menu-size / 6;
@mixin dot-menu-circle {
  content: "";
  position: absolute;
  width: $dot-menu-dot-size;
  height: $dot-menu-dot-size;
  border-radius: $dot-menu-dot-size;
  background-color: $dot-menu-dot-color;
  transition: .8s;
}

.dot-menu {
  position: relative;
  &:hover {
    .dot-menu__label {
      background-color: $dot-menu-color-active;
    }
  }
}

.dot-menu__checkbox {
  display: none;
}

.dot-menu__label:before,
.dot-menu__label:after {
  @include dot-menu-circle;
  left: $dot-menu-size / 2 - $dot-menu-dot-size / 2;
  transition: .2s;
}

.dot-menu__label:after {
  top: $dot-menu-size - $dot-menu-size / 3;
}

.dot-menu__label:before {
  top: $dot-menu-size / 6;
}

.dot-menu__checkbox:checked {
  ~ .dot-menu__label {
    background-color: $dot-menu-color-active;
  }
  ~ .dot-menu__label:before,
  ~ .dot-menu__label span:before,
  ~ .dot-menu__label:after {
    background-color: $dot-menu-dot-color-active;
    //move all icons into the center
    top: $dot-menu-size / 2 - $dot-menu-dot-size / 2
  }
  ~ .dot-menu__label span:before {
    width: $dot-menu-size / 2;
    left: $dot-menu-size / 2 - $dot-menu-dot-size - $dot-menu-dot-size / 2;
  }
}

.dot-menu__label {
  cursor: pointer;
  width: $dot-menu-size;
  height: $dot-menu-size;
  background-color: $dot-menu-color;
  display: block;
  @include text-invisible;
  span:before {
    @include dot-menu-circle;
    left: $dot-menu-size / 2 - $dot-menu-dot-size / 2;
    top: $dot-menu-size / 2 - $dot-menu-dot-size / 2
  }
}