Back to CSS Buttons Masking Tape Pure CSS
Share
HTML
<button class="btn-tape">
  <span class="btn-tape-text">FRAGILE</span>
</button>
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);
}