Single Satellite Orbit

One satellite continuously orbits the central FAB. Hover the FAB to pause the orbit, click to "lock in" the satellite at its current angle. Pure CSS via :hover paused state.

Pure CSS MIT licensed

Single Satellite Orbit the 12th 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

Open in playground

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>

.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 Hole Chronometer Nebula Cloud Mission Hub Service Orbit Tactile Dial Fan Reveal Petal Fan Full Circle Wheel Pie Slice Selector Donut Sectors Half-Donut Speed Dial

View the full collection →