Mission Hub — Live CSS Playground

{CF} CodeFronts Back to CSS Circular Menus Mission Hub Pure CSS

.ccm-sun { --n: 5; --ba: calc(180deg / var(--n)); --r: 110px; position: relative; width: 240px; height: 130px; overflow: visible; font-family: system-ui, sans-serif; }

.ccm-sun-wheel { position: absolute; bottom: 0; left: 50%; width: calc(var(--r) * 2); height: var(--r); margin-left: calc(var(--r) * -1); border-radius: var(--r) var(--r) 0 0; background: radial-gradient(farthest-side at 50% 100%, #14b8a6 35%, #1e293b 36%, #1e293b calc(100% - 1px), transparent 100%); filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4)); }

.ccm-sun-rim { position: absolute; bottom: 0; left: 50%; width: 240px; height: 130px; margin-left: -120px; pointer-events: none; z-index: 1; }

.ccm-sun-dividers line { stroke: rgba(94,234,212,0.25); stroke-width: 1; }

.ccm-sun-curve { font: 700 9px/1 ui-monospace, monospace; letter-spacing: 0.18em; fill: #cbd5e1; }

.ccm-sun-pivot { position: absolute; bottom: 0; left: 50%; width: 70px; height: 35px; margin-left: -35px; border-radius: 35px 35px 0 0; background: radial-gradient(farthest-side at 50% 100%, #5eead4 0%, #14b8a6 70%, #0f766e 100%); box-shadow: 0 -2px 8px rgba(94,234,212,0.35); z-index: 3; }

.ccm-sun-arc { position: absolute; bottom: 0; left: 50%; width: 50px; height: var(--r); margin-left: -25px; display: flex; align-items: flex-start; justify-content: center; padding-top: 28px; cursor: pointer; transform-origin: 50% 100%; transform: rotate(calc((var(--i) + 0.5) * var(--ba) - 90deg)); transition: color 0.25s; color: #94a3b8; z-index: 2; }

.ccm-sun-ico { display: inline-block; font-size: 22px; line-height: 1; transform: rotate(calc((var(--i) + 0.5) * var(--ba) * -1 + 90deg)); transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }

.ccm-sun-arc:hover, .ccm-sun-arc:focus-visible { color: #5eead4; }

.ccm-sun-arc:hover .ccm-sun-ico, .ccm-sun-arc:focus-visible .ccm-sun-ico { transform: rotate(calc((var(--i) + 0.5) * var(--ba) * -1 + 90deg)) translateY(-3px) scale(1.1); }

.ccm-sun:has(#ccm-sun-0:checked) [for="ccm-sun-0"],
.ccm-sun:has(#ccm-sun-1:checked) [for="ccm-sun-1"],
.ccm-sun:has(#ccm-sun-2:checked) [for="ccm-sun-2"],
.ccm-sun:has(#ccm-sun-3:checked) [for="ccm-sun-3"],
.ccm-sun:has(#ccm-sun-4:checked) [for="ccm-sun-4"] { color: #5eead4; }

.ccm-sun:has(#ccm-sun-0:checked) [for="ccm-sun-0"] .ccm-sun-ico,
.ccm-sun:has(#ccm-sun-1:checked) [for="ccm-sun-1"] .ccm-sun-ico,
.ccm-sun:has(#ccm-sun-2:checked) [for="ccm-sun-2"] .ccm-sun-ico,
.ccm-sun:has(#ccm-sun-3:checked) [for="ccm-sun-3"] .ccm-sun-ico,
.ccm-sun:has(#ccm-sun-4:checked) [for="ccm-sun-4"] .ccm-sun-ico { filter: drop-shadow(0 0 6px rgba(94,234,212,0.7)); }

.ccm-sun-bar { position: absolute; left: 50%; bottom: calc(var(--r) + 14px); display: flex; gap: 6px; padding: 8px 10px; background: #1e293b; border: 1px solid #334155; border-radius: 12px; transform: translateX(-50%) scale(0); transform-origin: 50% calc(100% + 10px); transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1); z-index: 4; box-shadow: 0 6px 18px rgba(0,0,0,0.4); }

.ccm-sun-bar::after { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -6px; border: 6px solid transparent; border-top-color: #1e293b; }

.ccm-sun:has(#ccm-sun-0:checked) .ccm-sun-bar-0, .ccm-sun:has(#ccm-sun-1:checked) .ccm-sun-bar-1, .ccm-sun:has(#ccm-sun-2:checked) .ccm-sun-bar-2, .ccm-sun:has(#ccm-sun-3:checked) .ccm-sun-bar-3, .ccm-sun:has(#ccm-sun-4:checked) .ccm-sun-bar-4 { transform: translateX(-50%) scale(1); }

.ccm-sun-sub { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(94,234,212,0.12); color: #5eead4; font: 700 13px/1 ui-monospace, monospace; text-decoration: none; border: 1px solid rgba(94,234,212,0.3); transition: background 0.2s, color 0.2s, transform 0.2s; }

.ccm-sun-sub:hover, .ccm-sun-sub:focus-visible { background: #5eead4; color: #0f172a; transform: scale(1.1); }

<div class="ccm-sun" role="toolbar" aria-label="Mission Hub">
  <input type="radio" name="ccm-sun" id="ccm-sun-0" class="ccm-sun-r" hidden>
  <input type="radio" name="ccm-sun" id="ccm-sun-1" class="ccm-sun-r" hidden>
  <input type="radio" name="ccm-sun" id="ccm-sun-2" class="ccm-sun-r" hidden checked>
  <input type="radio" name="ccm-sun" id="ccm-sun-3" class="ccm-sun-r" hidden>
  <input type="radio" name="ccm-sun" id="ccm-sun-4" class="ccm-sun-r" hidden>
  <div class="ccm-sun-wheel" aria-hidden="true"></div>
  <svg class="ccm-sun-rim" viewBox="0 0 240 130" aria-hidden="true">
    <defs>
      <path id="ccm-sun-arc-path" d="M 30 130 A 90 90 0 0 1 210 130" fill="none"/>
    </defs>
    <g class="ccm-sun-dividers">
      <line x1="91.7" y1="109.4" x2="56.9" y2="84.1"/>
      <line x1="109.2" y1="96.7" x2="95.9" y2="55.8"/>
      <line x1="130.8" y1="96.7" x2="144.1" y2="55.8"/>
      <line x1="148.3" y1="109.4" x2="183.1" y2="84.1"/>
    </g>
    <text class="ccm-sun-curve">
      <textPath href="#ccm-sun-arc-path" startOffset="10%" text-anchor="middle">MUSIC</textPath>
      <textPath href="#ccm-sun-arc-path" startOffset="30%" text-anchor="middle">MAPS</textPath>
      <textPath href="#ccm-sun-arc-path" startOffset="50%" text-anchor="middle">COMPASS</textPath>
      <textPath href="#ccm-sun-arc-path" startOffset="70%" text-anchor="middle">CAMERA</textPath>
      <textPath href="#ccm-sun-arc-path" startOffset="90%" text-anchor="middle">SETTINGS</textPath>
    </text>
  </svg>
  <div class="ccm-sun-pivot" aria-hidden="true"></div>
  <label for="ccm-sun-0" class="ccm-sun-arc" style="--i:0" aria-label="Music"><span class="ccm-sun-ico">♪</span></label>
  <label for="ccm-sun-1" class="ccm-sun-arc" style="--i:1" aria-label="Maps"><span class="ccm-sun-ico">◈</span></label>
  <label for="ccm-sun-2" class="ccm-sun-arc" style="--i:2" aria-label="Compass"><span class="ccm-sun-ico">⌖</span></label>
  <label for="ccm-sun-3" class="ccm-sun-arc" style="--i:3" aria-label="Camera"><span class="ccm-sun-ico">◉</span></label>
  <label for="ccm-sun-4" class="ccm-sun-arc" style="--i:4" aria-label="Settings"><span class="ccm-sun-ico">⚙</span></label>
  <div class="ccm-sun-bar ccm-sun-bar-0" role="toolbar" aria-label="Music actions">
    <a href="#" class="ccm-sun-sub" aria-label="Play">▶</a>
    <a href="#" class="ccm-sun-sub" aria-label="Pause">❚❚</a>
    <a href="#" class="ccm-sun-sub" aria-label="Skip">⏭</a>
  </div>
  <div class="ccm-sun-bar ccm-sun-bar-1" role="toolbar" aria-label="Maps actions">
    <a href="#" class="ccm-sun-sub" aria-label="Search">⌕</a>
    <a href="#" class="ccm-sun-sub" aria-label="Pin">◉</a>
    <a href="#" class="ccm-sun-sub" aria-label="Route">➤</a>
  </div>
  <div class="ccm-sun-bar ccm-sun-bar-2" role="toolbar" aria-label="Compass actions">
    <a href="#" class="ccm-sun-sub" aria-label="Calibrate">⊙</a>
    <a href="#" class="ccm-sun-sub" aria-label="North">▲</a>
    <a href="#" class="ccm-sun-sub" aria-label="Lock">⏻</a>
  </div>
  <div class="ccm-sun-bar ccm-sun-bar-3" role="toolbar" aria-label="Camera actions">
    <a href="#" class="ccm-sun-sub" aria-label="Shutter">●</a>
    <a href="#" class="ccm-sun-sub" aria-label="Flash">⚡</a>
    <a href="#" class="ccm-sun-sub" aria-label="Flip">⤾</a>
  </div>
  <div class="ccm-sun-bar ccm-sun-bar-4" role="toolbar" aria-label="Settings actions">
    <a href="#" class="ccm-sun-sub" aria-label="Profile">☺</a>
    <a href="#" class="ccm-sun-sub" aria-label="Theme">◐</a>
    <a href="#" class="ccm-sun-sub" aria-label="Help">?</a>
  </div>
</div>

Live preview Edit any tab — preview updates live Ready