Orbital FAB
A FAB that fans out three satellite buttons on click — but they arc into position along a curved path, not a straight line. The main button rotates and pulses an outer ring.
Orbital FAB the 10th of 22 designs in the 22 CSS Button Group 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="cbgp-orbit">
<input type="checkbox" id="cbgp-orbit-t" class="cbgp-orbit-toggle" aria-hidden="true" />
<label
for="cbgp-orbit-t"
class="cbgp-orbit-main"
tabindex="0"
role="button"
aria-label="Open create menu"
>
<span class="cbgp-orbit-plus" aria-hidden="true">+</span>
<span class="cbgp-orbit-ring" aria-hidden="true"></span>
</label>
<a class="cbgp-orbit-child cbgp-orbit-c1" href="javascript:void(0)" aria-label="New document">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
<polyline points="14 2 14 8 20 8" />
</svg>
</a>
<a class="cbgp-orbit-child cbgp-orbit-c2" href="javascript:void(0)" aria-label="New folder">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
</svg>
</a>
<a class="cbgp-orbit-child cbgp-orbit-c3" href="javascript:void(0)" aria-label="Upload file">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" />
</svg>
</a>
</div> .cbgp-orbit { position: relative; width: 60px; height: 60px; }
.cbgp-orbit-toggle {
position: absolute;
width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.cbgp-orbit-main, .cbgp-orbit-child {
position: absolute;
display: flex; align-items: center; justify-content: center;
text-decoration: none;
cursor: pointer;
user-select: none;
}
.cbgp-orbit-main {
z-index: 2;
bottom: 0; left: 0;
width: 56px; height: 56px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #00ffe0 0%, #006e62 100%);
color: #001f1c;
box-shadow:
0 0 0 0 rgba(0,255,224,0.4),
0 8px 22px rgba(0,255,224,0.35),
inset 0 -3px 6px rgba(0,0,0,0.25);
transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s;
}
.cbgp-orbit-plus {
font: 800 28px/1 ui-monospace, monospace;
transition: transform 0.4s cubic-bezier(.34,1.56,.64,1);
}
.cbgp-orbit-ring {
position: absolute; inset: -4px;
border-radius: 50%;
border: 2px solid #00ffe0;
opacity: 0;
transition: opacity 0.3s, transform 0.6s cubic-bezier(.65,0,.35,1);
}
.cbgp-orbit-toggle:focus-visible + .cbgp-orbit-main { outline: 2px solid #ff5af1; outline-offset: 4px; }
.cbgp-orbit-toggle:checked + .cbgp-orbit-main {
box-shadow:
0 0 0 4px rgba(0,255,224,0.18),
0 8px 28px rgba(0,255,224,0.55),
inset 0 -3px 6px rgba(0,0,0,0.25);
}
.cbgp-orbit-toggle:checked + .cbgp-orbit-main .cbgp-orbit-plus { transform: rotate(135deg); }
.cbgp-orbit-toggle:checked + .cbgp-orbit-main .cbgp-orbit-ring { opacity: 1; transform: scale(1.4); }
.cbgp-orbit-child {
z-index: 1;
bottom: 8px; left: 8px;
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(8,10,18,0.92);
border: 1.5px solid rgba(0,255,224,0.4);
color: #00ffe0;
font-size: 14px;
opacity: 0;
pointer-events: none;
transform: scale(0.4);
transition:
transform 0.5s cubic-bezier(.34,1.56,.64,1),
opacity 0.3s,
background 0.2s;
}
.cbgp-orbit-child svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cbgp-orbit-toggle:checked ~ .cbgp-orbit-child {
opacity: 1;
pointer-events: auto;
}
/* Curved arc deployment: each child arrives at a different angle around the FAB */
.cbgp-orbit-toggle:checked ~ .cbgp-orbit-c1 { transform: translate(0, -68px) scale(1); }
.cbgp-orbit-toggle:checked ~ .cbgp-orbit-c2 { transform: translate(50px, -50px) scale(1); }
.cbgp-orbit-toggle:checked ~ .cbgp-orbit-c3 { transform: translate(68px, 0) scale(1); }
.cbgp-orbit-child:hover {
background: rgba(0,255,224,0.18);
border-color: #00ffe0;
color: #c8fffa;
}
@media (prefers-reduced-motion: reduce) {
.cbgp-orbit-main, .cbgp-orbit-child, .cbgp-orbit-plus, .cbgp-orbit-ring { transition: none; }
}