Half-Donut Speed Dial

A bottom-anchored half-arc FAB that fans 5 actions upward in a 180° spread. Each item lands on the arc at an even angle. Pure CSS via :checked.

Pure CSS MIT licensed

Half-Donut Speed Dial the 9th 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-half">
  <input type="checkbox" id="ccm-half-t" hidden />
  <label for="ccm-half-t" class="ccm-half-fab" aria-label="Toggle">⊕</label>
  <a href="#" class="ccm-half-i" style="--a: 180deg">A</a>
  <a href="#" class="ccm-half-i" style="--a: 225deg">B</a>
  <a href="#" class="ccm-half-i" style="--a: 270deg">C</a>
  <a href="#" class="ccm-half-i" style="--a: 315deg">D</a>
  <a href="#" class="ccm-half-i" style="--a: 0deg">E</a>
</div>

.ccm-half {
  position: relative;
  width: 220px;
  height: 130px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.ccm-half-fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2ecc8a, #00e5ff);
  color: #0a0f0c;
  font-weight: 700;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.4s;
  z-index: 2;
  box-shadow: 0 6px 22px rgba(46, 204, 138, 0.4);
}

.ccm-half input:checked + .ccm-half-fab {
  transform: rotate(180deg);
}

.ccm-half-i {
  position: absolute;
  bottom: 28px;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px;
  border-radius: 50%;
  background: #1f1f2e;
  border: 1.5px solid #2ecc8a;
  color: #2ecc8a;
  font:
    700 12px/36px ui-monospace,
    monospace;
  text-align: center;
  text-decoration: none;
  transform: translate(0, 0) rotate(var(--a)) translate(0) rotate(calc(var(--a) * -1));
  opacity: 0;
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s;
}

.ccm-half input:checked ~ .ccm-half-i {
  transform: translate(0, 0) rotate(var(--a)) translate(80px) rotate(calc(var(--a) * -1));
  opacity: 1;
}

.ccm-half-i:nth-of-type(1) {
  transition-delay: 0.05s;
}

.ccm-half-i:nth-of-type(2) {
  transition-delay: 0.1s;
}

.ccm-half-i:nth-of-type(3) {
  transition-delay: 0.15s;
}

.ccm-half-i:nth-of-type(4) {
  transition-delay: 0.2s;
}

.ccm-half-i:nth-of-type(5) {
  transition-delay: 0.25s;
}

More from 21 CSS Circular & Radial Menu Designs

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

View the full collection →