Full Circle Wheel

Eight items evenly distributed around a 360° ring, all visible at rest. Hover any item to scale it up; the central icon stays anchored. Pure trig via CSS variables.

Pure CSS MIT licensed

Full Circle Wheel the 6th 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-wheel">
  <span class="ccm-wheel-c" aria-hidden="true">◉</span>
  <a href="#" class="ccm-wheel-i" style="--a: 0deg">A</a>
  <a href="#" class="ccm-wheel-i" style="--a: 45deg">B</a>
  <a href="#" class="ccm-wheel-i" style="--a: 90deg">C</a>
  <a href="#" class="ccm-wheel-i" style="--a: 135deg">D</a>
  <a href="#" class="ccm-wheel-i" style="--a: 180deg">E</a>
  <a href="#" class="ccm-wheel-i" style="--a: 225deg">F</a>
  <a href="#" class="ccm-wheel-i" style="--a: 270deg">G</a>
  <a href="#" class="ccm-wheel-i" style="--a: 315deg">H</a>
</div>

.ccm-wheel {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ccm-wheel-c {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: #fff;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px rgba(124, 108, 255, 0.18);
}

.ccm-wheel-i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px;
  border-radius: 50%;
  background: #1f1f2e;
  color: #c4b5fd;
  font:
    700 12px/32px ui-monospace,
    monospace;
  text-align: center;
  text-decoration: none;
  border: 1px solid rgba(124, 108, 255, 0.3);
  transform: rotate(var(--a)) translate(78px) rotate(calc(var(--a) * -1));
  transition:
    transform 0.25s,
    background 0.2s,
    color 0.2s;
}

.ccm-wheel-i:hover,
.ccm-wheel-i:focus-visible {
  background: #7c6cff;
  color: #fff;
  transform: rotate(var(--a)) translate(78px) rotate(calc(var(--a) * -1)) scale(1.4);
  z-index: 2;
}

More from 21 CSS Circular & Radial Menu Designs

Compass Rose Iris Aperture Black Hole Chronometer Nebula Cloud Mission Hub Service Orbit Tactile Dial Fan Reveal Petal Fan Pie Slice Selector Donut Sectors

View the full collection →