Back to CSS Buttons Postage Stamp Pure CSS
Share
HTML
<button class="btn-stamp">
  <span class="btn-stamp-text">FIRST CLASS</span>
  <span class="btn-stamp-num">¢25</span>
</button>
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); }