.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; } <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>
Live preview Edit any tab — preview updates live Ready