21 CSS Circular & Radial Menu Designs
Vinyl Record
A spinning vinyl record menu. The disc rotates continuously; menu items sit on the label area. Pause on hover via animation-play-state. Classic music-app metaphor.
Vinyl Record the 16th 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-vinyl">
<div class="ccm-vinyl-disc">
<div class="ccm-vinyl-label">
<a href="#" class="ccm-vinyl-i" style="--a: -90deg">▶</a>
<a href="#" class="ccm-vinyl-i" style="--a: 0deg">♫</a>
<a href="#" class="ccm-vinyl-i" style="--a: 90deg">♪</a>
<a href="#" class="ccm-vinyl-i" style="--a: 180deg">⏏</a>
</div>
</div>
</div> .ccm-vinyl {
position: relative;
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.ccm-vinyl-disc {
width: 200px;
height: 200px;
border-radius: 50%;
background:
radial-gradient(circle at center, #1a1a1a 30%, transparent 31%),
repeating-radial-gradient(circle at center, #0a0a0a 0, #0a0a0a 1px, #1a1a1a 1px, #1a1a1a 3px);
position: relative;
animation: ccm-vinyl-spin 8s linear infinite;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.05),
0 8px 24px rgba(0, 0, 0, 0.5);
}
.ccm-vinyl-disc::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
margin: -4px;
border-radius: 50%;
background: #f5a84a;
}
.ccm-vinyl-label {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin: -50px;
border-radius: 50%;
background: linear-gradient(135deg, #ff6c8a, #f5a84a);
}
.ccm-vinyl-i {
position: absolute;
top: 50%;
left: 50%;
width: 22px;
height: 22px;
margin: -11px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.45);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
text-decoration: none;
transform: rotate(var(--a)) translate(28px) rotate(calc(var(--a) * -1));
}
.ccm-vinyl-i:hover {
background: rgba(0, 0, 0, 0.7);
}
.ccm-vinyl:hover .ccm-vinyl-disc {
animation-play-state: paused;
}
@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-vinyl-spin { to { transform: rotate(360deg); } }