Brushed Brass
Letterpress brass plate with engraved label and steel rivets at the corners. Hover deepens the bevel; click presses the plate into the surface.
Brushed Brass the 13th 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-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);
}