CSS
.btn-stamp {
position: relative;
padding: 16px 22px;
border: none;
background: #1a3a78;
color: #fdf6e9;
font-family: ui-serif, Georgia, serif;
font-size: 11px; font-weight: 800;
letter-spacing: 0.22em;
cursor: pointer;
display: grid; gap: 4px;
/* Scalloped perforated edges via radial mask */
-webkit-mask:
radial-gradient(circle 4px at 0 50%, transparent 99%, #000 100%) repeat-y left,
radial-gradient(circle 4px at 100% 50%, transparent 99%, #000 100%) repeat-y right,
radial-gradient(circle 4px at 50% 0, transparent 99%, #000 100%) repeat-x top,
radial-gradient(circle 4px at 50% 100%, transparent 99%, #000 100%) repeat-x bottom,
linear-gradient(#000, #000);
-webkit-mask-size: 8px 12px, 8px 12px, 12px 8px, 12px 8px, 100% 100%;
-webkit-mask-composite: source-over;
mask:
radial-gradient(circle 4px at 0 50%, transparent 99%, #000 100%) repeat-y left,
radial-gradient(circle 4px at 100% 50%, transparent 99%, #000 100%) repeat-y right,
radial-gradient(circle 4px at 50% 0, transparent 99%, #000 100%) repeat-x top,
radial-gradient(circle 4px at 50% 100%, transparent 99%, #000 100%) repeat-x bottom,
linear-gradient(#000, #000);
mask-size: 8px 12px, 8px 12px, 12px 8px, 12px 8px, 100% 100%;
mask-composite: add;
box-shadow: 0 4px 12px rgba(26,58,120,0.4);
transition: transform 0.2s ease;
}
.btn-stamp-num {
font-size: 18px; color: #fcb938;
letter-spacing: 0.08em;
}
.btn-stamp:hover { transform: rotate(-3deg) translateY(-2px); }