Vinyl Sleeve
Sleeve-red record cover with concentric grooves; click drops the needle and ripples outward from the click point.
Vinyl Sleeve the 31st of 43 designs in the 43 CSS Button Designs collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<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');
});
});