Cassette Label
Hot-pink mixtape J-card with electric-teal corner sticker and ruled lines. Hover gives it a 90s cassette tilt.
Cassette Label the 29th of 43 designs in the 43 CSS Button 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
<button class="btn-cass"> <span class="btn-cass-corner" aria-hidden="true"></span> <span class="btn-cass-text">SIDE A</span> </button>
.btn-cass {
position: relative;
padding: 14px 32px 14px 38px;
border: 2px solid #0a0a14;
border-radius: 0;
background:
repeating-linear-gradient(0deg,
transparent 0 13px,
rgba(10,10,20,0.18) 13px 14px),
#ff3d83;
color: #0a0a14;
font-family: ui-monospace, monospace;
font-size: 14px; font-weight: 900;
letter-spacing: 0.28em;
cursor: pointer;
box-shadow: 4px 4px 0 #0a0a14;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-cass-corner {
position: absolute;
top: 4px; left: 4px;
width: 16px; height: 16px;
background: #00d4d4;
border: 2px solid #0a0a14;
transform: rotate(45deg);
transform-origin: center;
}
.btn-cass-text { position: relative; }
.btn-cass:hover { transform: rotate(-1.5deg) translate(-1px,-1px); box-shadow: 5px 5px 0 #0a0a14; }