Brutalist Slab
Rough concrete with a safety-yellow stripe and hard 6px offset. Click slams the slab to flush with the page.
Brutalist Slab the 22nd 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-brutal"> <span class="btn-brutal-stripe" aria-hidden="true"></span> <span class="btn-brutal-text">SUBMIT</span> </button>
.btn-brutal {
position: relative;
padding: 16px 40px;
border: 3px solid #1a1a1a;
border-radius: 0;
background:
repeating-radial-gradient(circle at 20% 30%, rgba(0,0,0,0.06) 0 1px, transparent 1px 5px),
repeating-radial-gradient(circle at 80% 70%, rgba(0,0,0,0.05) 0 1px, transparent 1px 7px),
#8a8a85;
color: #1a1a1a;
font-family: ui-monospace, monospace;
font-size: 14px; font-weight: 900;
letter-spacing: 0.18em;
cursor: pointer;
box-shadow: 6px 6px 0 #1a1a1a;
transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn-brutal-stripe {
position: absolute; left: 0; right: 0;
top: -3px; height: 6px;
background: #f5cb1a;
border-bottom: 3px solid #1a1a1a;
}
.btn-brutal-text { position: relative; }
.btn-brutal:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 #1a1a1a; }
.btn-brutal:active { transform: translate(6px,6px); box-shadow: 0 0 0 #1a1a1a; }