<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;
}