Neo-Brutalist Buttons

Officialby Cube Burst Studios

Bold buttons with thick borders and hard shadows that press down when clicked. Six colours, three sizes, focus and disabled states.

⬇ Download ZIP 1.7 KB

Category: Web Dev
File: brutalist-buttons.zip
Size: 1.7 KB
Downloads: 0
Added: 16 Oct 2026
Licence: Free to use, no credit needed (CC0)

#css #buttons #neo brutalism #ui #cta

⚑ Report this

Bold buttons with thick borders and hard shadows that press down when clicked. Six colours, three sizes, focus and disabled states.

The download has a working demo (index.html) plus the files to copy. The key file is shown below with a Copy button.

component.css

/* Neo-Brutalist Buttons · Cube Burst Studios · CC0
   <button class="nb nb--lemon">Play now</button>   sizes: .nb--sm .nb--lg   colours: lemon mint rose lilac ink paper */
.nb {
	--ink: #111; --bg: #ffe14d; --fg: #111;
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 48px; padding: 0 24px; border: 3px solid var(--ink); border-radius: 0;
	background: var(--bg); color: var(--fg); box-shadow: 5px 5px 0 var(--ink);
	font: 800 16px/1 system-ui, sans-serif; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease;
}
.nb:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.nb:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); }
.nb:focus-visible { outline: 3px dashed var(--ink); outline-offset: 5px; }
.nb:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 5px 5px 0 var(--ink); }
.nb--sm { min-height: 36px; padding: 0 14px; font-size: 13px; box-shadow: 3px 3px 0 var(--ink); }
.nb--lg { min-height: 64px; padding: 0 36px; font-size: 20px; box-shadow: 7px 7px 0 var(--ink); }
.nb--lemon { --bg: #ffe14d; } .nb--mint { --bg: #5fe3ce; } .nb--rose { --bg: #ff5c8a; --fg: #fff; }
.nb--lilac { --bg: #a98aeb; } .nb--ink { --bg: #111; --fg: #ffe14d; } .nb--paper { --bg: #fff; }
@media (prefers-reduced-motion: reduce) { .nb { transition: none; } }