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