Masking Tape
Kraft masking tape with torn perforated edges and a hand-stamped ink label. Hover lifts the corner like a peel.
Masking Tape the 25th 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-tape"> <span class="btn-tape-text">FRAGILE</span> </button>
.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);
}