43 CSS Button Designs 25 / 43
Masking Tape
Kraft masking tape with torn perforated edges and a hand-stamped ink label.
The code
<button class="btn-tape"> <span class="btn-tape-text">FRAGILE</span> </button>
<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);
} .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);
}