<button class="btn-vinyl">Play</button>

.btn-vinyl {
  position: relative;
  width: 96px; height: 96px;
  border: 2px solid #1a1a1a;
  border-radius: 50%;
  background:
    radial-gradient(circle at center,
      #f5ead0 0%,
      #f5ead0 18%,
      #1a1a1a 19%,
      #1a1a1a 100%),
    #cc3232;
  background-size: 100% 100%;
  background-color: #cc3232;
  color: #cc3232;
  font-family: ui-serif, Georgia, serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em;
  cursor: pointer;
  display: grid; place-items: center;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 4px 14px rgba(0,0,0,0.35);
  transition: transform 0.3s ease;
}
.btn-vinyl::before {
  content: '';
  position: absolute; inset: 12px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, #1a1a1a 0 1px, #2a2a2a 1px 3px);
  pointer-events: none;
}
.btn-vinyl::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(245,234,208,0.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.btn-vinyl.btn-vinyl-rippled::after {
  animation: btn-vinyl-ripple 0.7s ease-out;
}
@keyframes btn-vinyl-ripple {
  0%   { width: 0; height: 0; opacity: 0.7; }
  100% { width: 200%; height: 200%; opacity: 0; }
}
.btn-vinyl:hover { transform: rotate(20deg); }
.btn-vinyl span,
.btn-vinyl  { isolation: isolate; }
/* label sits on top of grooves */
.btn-vinyl { z-index: 0; }

document.querySelectorAll('.btn-vinyl').forEach(function(btn) {
  btn.addEventListener('click', function() {
    btn.classList.remove('btn-vinyl-rippled');
    /* force reflow so the same animation can replay */
    void btn.offsetWidth;
    btn.classList.add('btn-vinyl-rippled');
  });
});