<div class="ccm-hex">
  <a href="#" class="ccm-hex-c" aria-label="Center">◆</a>
  <a href="#" class="ccm-hex-i" style="--a: -90deg" aria-label="N">N</a>
  <a href="#" class="ccm-hex-i" style="--a: -30deg" aria-label="NE">NE</a>
  <a href="#" class="ccm-hex-i" style="--a: 30deg" aria-label="SE">SE</a>
  <a href="#" class="ccm-hex-i" style="--a: 90deg" aria-label="S">S</a>
  <a href="#" class="ccm-hex-i" style="--a: 150deg" aria-label="SW">SW</a>
  <a href="#" class="ccm-hex-i" style="--a: 210deg" aria-label="NW">NW</a>
</div>

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

.ccm-hex-c,
.ccm-hex-i {
  width: 50px;
  height: 58px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font:
    700 11px/1 system-ui,
    sans-serif;
  text-decoration: none;
  transition:
    transform 0.2s,
    background 0.2s;
}

.ccm-hex-c {
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  color: #fff;
  position: relative;
  z-index: 2;
}

.ccm-hex-i {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -29px -25px;
  background: #1f1f2e;
  color: #c4b5fd;
  transform: rotate(var(--a)) translate(64px) rotate(calc(var(--a) * -1));
}

.ccm-hex-i:hover,
.ccm-hex-i:focus-visible {
  background: #2a2a3e;
  color: #fff;
  transform: rotate(var(--a)) translate(64px) rotate(calc(var(--a) * -1)) scale(1.1);
}