21 CSS Circular & Radial Menu Designs
Petal Fan
Six action buttons fan out across a 180° upper arc from a central FAB on hover, each with a staggered scale-in. Pure CSS via :hover + transition-delay per child.
Petal Fan the 5th of 21 designs in the 21 CSS Circular & Radial Menu Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<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;
}