<div class="ccm-half">
  <input type="checkbox" id="ccm-half-t" hidden />
  <label for="ccm-half-t" class="ccm-half-fab" aria-label="Toggle">⊕</label>
  <a href="#" class="ccm-half-i" style="--a: 180deg">A</a>
  <a href="#" class="ccm-half-i" style="--a: 225deg">B</a>
  <a href="#" class="ccm-half-i" style="--a: 270deg">C</a>
  <a href="#" class="ccm-half-i" style="--a: 315deg">D</a>
  <a href="#" class="ccm-half-i" style="--a: 0deg">E</a>
</div>

.ccm-half {
  position: relative;
  width: 220px;
  height: 130px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.ccm-half-fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2ecc8a, #00e5ff);
  color: #0a0f0c;
  font-weight: 700;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.4s;
  z-index: 2;
  box-shadow: 0 6px 22px rgba(46, 204, 138, 0.4);
}

.ccm-half input:checked + .ccm-half-fab {
  transform: rotate(180deg);
}

.ccm-half-i {
  position: absolute;
  bottom: 28px;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px;
  border-radius: 50%;
  background: #1f1f2e;
  border: 1.5px solid #2ecc8a;
  color: #2ecc8a;
  font:
    700 12px/36px ui-monospace,
    monospace;
  text-align: center;
  text-decoration: none;
  transform: translate(0, 0) rotate(var(--a)) translate(0) rotate(calc(var(--a) * -1));
  opacity: 0;
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s;
}

.ccm-half input:checked ~ .ccm-half-i {
  transform: translate(0, 0) rotate(var(--a)) translate(80px) rotate(calc(var(--a) * -1));
  opacity: 1;
}

.ccm-half-i:nth-of-type(1) {
  transition-delay: 0.05s;
}

.ccm-half-i:nth-of-type(2) {
  transition-delay: 0.1s;
}

.ccm-half-i:nth-of-type(3) {
  transition-delay: 0.15s;
}

.ccm-half-i:nth-of-type(4) {
  transition-delay: 0.2s;
}

.ccm-half-i:nth-of-type(5) {
  transition-delay: 0.25s;
}