21 CSS Circular & Radial Menu Designs 12 / 21
Single Satellite Orbit
One satellite continuously orbits the central FAB.
The code
<div class="ccm-orbit"> <div class="ccm-orbit-track"></div> <div class="ccm-orbit-sat"><a href="#" class="ccm-orbit-i" aria-label="Item">◆</a></div> <a href="#" class="ccm-orbit-c" aria-label="Center">◉</a> </div>
<div class="ccm-orbit">
<div class="ccm-orbit-track"></div>
<div class="ccm-orbit-sat"><a href="#" class="ccm-orbit-i" aria-label="Item">◆</a></div>
<a href="#" class="ccm-orbit-c" aria-label="Center">◉</a>
</div>.ccm-orbit {
position: relative;
width: 180px;
height: 180px;
display: flex;
align-items: center;
justify-content: center;
}
.ccm-orbit-track {
position: absolute;
inset: 20px;
border-radius: 50%;
border: 1px dashed rgba(124, 108, 255, 0.3);
}
.ccm-orbit-c {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, #7c6cff, #a78bfa);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 18px;
z-index: 2;
box-shadow: 0 0 0 4px rgba(124, 108, 255, 0.18);
}
.ccm-orbit-sat {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
animation: ccm-orbit-spin 5s linear infinite;
}
.ccm-orbit-i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: #1f1f2e;
color: #c4b5fd;
text-decoration: none;
border: 1px solid rgba(124, 108, 255, 0.4);
transform: translate(70px);
animation: ccm-orbit-counter 5s linear infinite;
}
.ccm-orbit:hover .ccm-orbit-sat,
.ccm-orbit:hover .ccm-orbit-i {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.ccm-holo-rim,
.ccm-snow-flakes,
.ccm-orbit-sat,
.ccm-orbit-i,
.ccm-solar-o,
.ccm-solar-o a,
.ccm-tri-grp,
.ccm-vinyl-disc,
.ccm-bh-disk,
.ccm-neb-cloud,
.ccm-neb-i {
animation: none !important;
}
}
@keyframes ccm-orbit-spin { to { transform: rotate(360deg); } }
@keyframes ccm-orbit-counter { to { transform: translate(70px) rotate(-360deg); } }
.ccm-orbit {
position: relative;
width: 180px;
height: 180px;
display: flex;
align-items: center;
justify-content: center;
}
.ccm-orbit-track {
position: absolute;
inset: 20px;
border-radius: 50%;
border: 1px dashed rgba(124, 108, 255, 0.3);
}
.ccm-orbit-c {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, #7c6cff, #a78bfa);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 18px;
z-index: 2;
box-shadow: 0 0 0 4px rgba(124, 108, 255, 0.18);
}
.ccm-orbit-sat {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
animation: ccm-orbit-spin 5s linear infinite;
}
.ccm-orbit-i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: #1f1f2e;
color: #c4b5fd;
text-decoration: none;
border: 1px solid rgba(124, 108, 255, 0.4);
transform: translate(70px);
animation: ccm-orbit-counter 5s linear infinite;
}
.ccm-orbit:hover .ccm-orbit-sat,
.ccm-orbit:hover .ccm-orbit-i {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.ccm-holo-rim,
.ccm-snow-flakes,
.ccm-orbit-sat,
.ccm-orbit-i,
.ccm-solar-o,
.ccm-solar-o a,
.ccm-tri-grp,
.ccm-vinyl-disc,
.ccm-bh-disk,
.ccm-neb-cloud,
.ccm-neb-i {
animation: none !important;
}
}
@keyframes ccm-orbit-spin { to { transform: rotate(360deg); } }
@keyframes ccm-orbit-counter { to { transform: translate(70px) rotate(-360deg); } }
More from 21 CSS Circular & Radial Menu Designs
Black HoleChronometerNebula CloudMission HubService OrbitTactile DialFan RevealPetal FanFull Circle WheelPie Slice SelectorDonut SectorsHalf-Donut Speed Dial
View the full collection →