Compass Radial Nav

<!--
  Author: @emma-lake
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="radial-nav">
  <button class="radial-nav__hub">&#9776;</button>
  <a href="#" class="radial-nav__item radial-nav__item--n">H</a>
  <a href="#" class="radial-nav__item radial-nav__item--e">S</a>
  <a href="#" class="radial-nav__item radial-nav__item--s">U</a>
  <a href="#" class="radial-nav__item radial-nav__item--w">C</a>
</div>

/*
 * Author: @emma-lake
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.radial-nav {
  position: relative;
  width: 60px;
  height: 60px;
}
.radial-nav__hub {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: #6366f1;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 8px 20px -6px rgba(99, 102, 241, 0.6);
  position: relative;
  z-index: 2;
  animation: hub-breathe 2.4s ease-in-out infinite;
}
@keyframes hub-breathe {
  0%, 100% {
    box-shadow: 0 8px 20px -6px rgba(99, 102, 241, 0.6);
  }
  50% {
    box-shadow: 0 8px 26px -4px rgba(99, 102, 241, 0.9);
  }
}
.radial-nav__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  background: #1c1c24;
  border: 1px solid #2e2e38;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  font-family: system-ui, sans-serif;
  color: #cfcfd6;
  text-decoration: none;
  opacity: 0;
  transform: scale(0.3);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  pointer-events: none;
}
.radial-nav:hover .radial-nav__item {
  opacity: 1;
  pointer-events: auto;
}
.radial-nav:hover .radial-nav__item--n {
  transform: translateY(-64px) scale(1);
}
.radial-nav:hover .radial-nav__item--e {
  transform: translateX(64px) scale(1);
}
.radial-nav:hover .radial-nav__item--s {
  transform: translateY(64px) scale(1);
}
.radial-nav:hover .radial-nav__item--w {
  transform: translateX(-64px) scale(1);
}