Lacquered Wood
Walnut grain block with brass corner brackets and gilt label. Hover deepens the lacquer sheen; the brass catches a tilt of light.
Lacquered Wood the 17th of 43 designs in the 43 CSS Button Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<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);
}