<button class="btn-wood">
  <span class="btn-wood-corner btn-wood-corner-tl" aria-hidden="true"></span>
  <span class="btn-wood-corner btn-wood-corner-tr" aria-hidden="true"></span>
  <span class="btn-wood-corner btn-wood-corner-bl" aria-hidden="true"></span>
  <span class="btn-wood-corner btn-wood-corner-br" aria-hidden="true"></span>
  <span class="btn-wood-text">Reserve</span>
</button>

.btn-wood {
  position: relative;
  padding: 14px 36px;
  border: none;
  border-radius: 3px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.06) 0 1px,
      transparent 1px 4px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.04) 0 6px,
      transparent 6px 14px
    ),
    linear-gradient(135deg, #6a4628 0%, #5a3a20 50%, #3a2410 100%);
  color: #c9a15e;
  font-family: ui-serif, Georgia, serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(201,161,94,0.2),
    0 4px 14px rgba(0,0,0,0.4);
  transition: filter 0.2s ease, transform 0.18s ease;
}
.btn-wood-corner {
  position: absolute;
  width: 12px; height: 12px;
  border: 2px solid #c9a15e;
  background: #c9a15e22;
}
.btn-wood-corner-tl { top: 4px;    left: 4px;    border-right: none;  border-bottom: none; }
.btn-wood-corner-tr { top: 4px;    right: 4px;   border-left: none;   border-bottom: none; }
.btn-wood-corner-bl { bottom: 4px; left: 4px;    border-right: none;  border-top: none; }
.btn-wood-corner-br { bottom: 4px; right: 4px;   border-left: none;   border-top: none; }
.btn-wood-text { position: relative; z-index: 1; }
.btn-wood:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}