CSS
.btn-tape {
position: relative;
padding: 14px 38px;
border: none;
border-radius: 0;
background:
repeating-linear-gradient(135deg,
rgba(0,0,0,0.04) 0 6px,
transparent 6px 12px),
#d8b87a;
color: #2a1d0e;
font-family: ui-monospace, monospace;
font-size: 14px; font-weight: 800;
letter-spacing: 0.32em;
cursor: pointer;
/* Torn edges: scalloped left/right via radial-gradient mask */
-webkit-mask:
radial-gradient(circle 4px at 0% 50%, transparent 99%, #000 100%),
radial-gradient(circle 4px at 100% 50%, transparent 99%, #000 100%),
linear-gradient(#000, #000);
mask:
radial-gradient(circle 4px at 0% 50%, transparent 99%, #000 100%),
radial-gradient(circle 4px at 100% 50%, transparent 99%, #000 100%),
linear-gradient(#000, #000);
-webkit-mask-composite: source-over;
mask-composite: add;
box-shadow: 0 3px 8px rgba(0,0,0,0.2);
transition: transform 0.25s cubic-bezier(.3,1,.3,1);
}
.btn-tape:hover {
transform: rotate(-2deg) translateY(-2px);
}