<button class="btn-brass">
  <span class="btn-brass-rivet" aria-hidden="true"></span>
  <span class="btn-brass-rivet" aria-hidden="true"></span>
  <span class="btn-brass-label">Engage</span>
  <span class="btn-brass-rivet" aria-hidden="true"></span>
  <span class="btn-brass-rivet" aria-hidden="true"></span>
</button>

.btn-brass {
  position: relative;
  padding: 14px 36px;
  border: none;
  border-radius: 4px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,232,180,0.12) 0 1px,
      transparent 1px 3px
    ),
    linear-gradient(180deg, #d8b66e 0%, #c9a15e 50%, #a07f3a 100%);
  color: #2a1d0e;
  font-family: ui-serif, Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  gap: 0 24px;
  align-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255,232,180,0.6),
    inset 0 -2px 0 rgba(58,36,16,0.4),
    0 4px 8px rgba(0,0,0,0.3);
  text-shadow: 0 1px 0 rgba(255,232,180,0.5);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.18s ease;
}
.btn-brass-rivet {
  width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f0e8d8, #6a5a30 70%);
  box-shadow: inset 0 -1px 1px rgba(0,0,0,0.4);
}
.btn-brass-label {
  grid-column: span 1;
  grid-row: 1 / span 2;
  text-align: center;
  border-top: 1px solid rgba(58,36,16,0.4);
  border-bottom: 1px solid rgba(58,36,16,0.4);
  padding: 4px 0;
}
.btn-brass:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,232,180,0.7),
    inset 0 -2px 0 rgba(58,36,16,0.5),
    0 6px 12px rgba(0,0,0,0.35);
}
.btn-brass:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 4px rgba(58,36,16,0.4),
    0 1px 2px rgba(0,0,0,0.2);
}