21 CSS Circular & Radial Menu Designs
Black Hole
Items orbit a glowing accretion-disk singularity at all times. On hover the disk pulses brighter and items lift outward slightly — a gravitational "release". Items stay clickable throughout.
Black Hole the 19th of 21 designs in the 21 CSS Circular & Radial Menu Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="ccm-bh"> <div class="ccm-bh-disk" aria-hidden="true"></div> <div class="ccm-bh-core" aria-hidden="true"></div> <a href="#" class="ccm-bh-i" style="--a: -90deg" aria-label="Item A">A</a> <a href="#" class="ccm-bh-i" style="--a: -30deg" aria-label="Item B">B</a> <a href="#" class="ccm-bh-i" style="--a: 30deg" aria-label="Item C">C</a> <a href="#" class="ccm-bh-i" style="--a: 90deg" aria-label="Item D">D</a> <a href="#" class="ccm-bh-i" style="--a: 150deg" aria-label="Item E">E</a> <a href="#" class="ccm-bh-i" style="--a: 210deg" aria-label="Item F">F</a> </div>
.ccm-bh {
position: relative;
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.ccm-bh-disk {
position: absolute;
top: 50%;
left: 50%;
width: 110px;
height: 110px;
margin: -55px;
border-radius: 50%;
background: conic-gradient(from 0deg, #d4af37, #ff6c8a, #7c6cff, #d4af37);
filter: blur(6px);
animation: ccm-bh-spin 8s linear infinite;
transition: filter 0.4s;
z-index: 1;
}
.ccm-bh:hover .ccm-bh-disk {
filter: blur(4px) brightness(1.3);
}
.ccm-bh-core {
position: absolute;
top: 50%;
left: 50%;
width: 56px;
height: 56px;
margin: -28px;
border-radius: 50%;
background: #000;
box-shadow: 0 0 30px 8px rgba(0, 0, 0, 0.7);
z-index: 2;
}
.ccm-bh-i {
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
margin: -15px;
border-radius: 50%;
background: #1f1f2e;
color: #ffd479;
display: inline-flex;
align-items: center;
justify-content: center;
font:
700 12px/1 ui-monospace,
monospace;
text-decoration: none;
border: 1px solid rgba(212, 175, 55, 0.5);
transform: rotate(var(--a)) translate(80px) rotate(calc(var(--a) * -1));
transition:
transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
background 0.2s,
color 0.2s,
box-shadow 0.3s;
z-index: 3;
}
.ccm-bh:hover .ccm-bh-i {
transform: rotate(var(--a)) translate(92px) rotate(calc(var(--a) * -1));
box-shadow: 0 0 12px rgba(212, 175, 55, 0.45);
}
.ccm-bh-i:hover,
.ccm-bh-i:focus-visible {
background: #ffd479;
color: #0a0a14;
transform: rotate(var(--a)) translate(96px) rotate(calc(var(--a) * -1)) scale(1.2);
z-index: 4;
}
@media (prefers-reduced-motion: reduce) {
.ccm-holo-rim,
.ccm-snow-flakes,
.ccm-orbit-sat,
.ccm-orbit-i,
.ccm-solar-o,
.ccm-solar-o a,
.ccm-tri-grp,
.ccm-vinyl-disc,
.ccm-bh-disk,
.ccm-neb-cloud,
.ccm-neb-i {
animation: none !important;
}
}
@keyframes ccm-bh-spin { to { transform: rotate(360deg); } }