<div class="ccm-petal">
  <input type="checkbox" id="ccm-petal-t" class="ccm-petal-t" hidden />
  <label for="ccm-petal-t" class="ccm-petal-fab" aria-label="Open menu">+</label>
  <a href="#" class="ccm-petal-i" style="--a: -90deg" aria-label="Home">⌂</a>
  <a href="#" class="ccm-petal-i" style="--a: -126deg" aria-label="Search">⌕</a>
  <a href="#" class="ccm-petal-i" style="--a: -162deg" aria-label="Star">★</a>
  <a href="#" class="ccm-petal-i" style="--a: -54deg" aria-label="Like">♥</a>
  <a href="#" class="ccm-petal-i" style="--a: -18deg" aria-label="Mail">✉</a>
  <a href="#" class="ccm-petal-i" style="--a: -198deg" aria-label="Settings">⚙</a>
</div>

.ccm-petal {
  position: relative;
  width: 220px;
  height: 140px;
}

.ccm-petal-fab {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  color: #fff;
  font-size: 26px;
  line-height: 52px;
  text-align: center;
  cursor: pointer;
  transform: translateX(-50%);
  transition: transform 0.4s;
  box-shadow: 0 6px 18px rgba(124, 108, 255, 0.4);
  z-index: 2;
}

.ccm-petal-i {
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1f1f2e;
  color: #c4b5fd;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transform: translate(-50%, 0) rotate(0) translateY(0) rotate(0);
  opacity: 0;
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s;
}

.ccm-petal:hover .ccm-petal-fab,
.ccm-petal-t:checked + .ccm-petal-fab {
  transform: translateX(-50%) rotate(45deg);
}

.ccm-petal:hover .ccm-petal-i,
.ccm-petal-t:checked ~ .ccm-petal-i {
  transform: translate(-50%, 0) rotate(var(--a)) translateY(-72px) rotate(calc(var(--a) * -1));
  opacity: 1;
}

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

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

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

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

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

.ccm-petal-i:nth-of-type(6) {
  transition-delay: 0.3s;
}