About this set
Flat, loud buttons in the neobrutalist style: a 3 pixel black border, heavy 900 weight labels, bright flat fills and a hard 5 pixel offset shadow with no blur. Hovering slides the button 2 pixels towards its shadow, and pressing slides it the full 5 pixels so the shadow disappears, which reads as a physical click. The set has green Sign up free, pink See pricing, sky Read the docs, a white Maybe later, an uppercase yellow Buy now and a black Start building button whose shadow is orange instead of black. Use them on landing pages, portfolios and indie product sites that already use thick outlines and saturated colour; they clash with soft, shadowed interfaces. The shadow lives in a –bb-shadow custom property that the hover and active states rewrite, so changing the edge colour is one variable, and in the Bootstrap version the same property feeds –bs-btn-focus-box-shadow so the offset shadow stays visible while a button has focus. Black labels on every light fill reach well over 4.5:1, and yellow on black does too.
What’s included
- 3px border and hard offset shadow with no blur
- Hover and press slide the button onto its shadow
- Six fills including an uppercase and a dark variant
- Edge colour set by one custom property
- Transitions removed under prefers-reduced-motion
Accessibility
Every button is a native button element with a text label, reachable with Tab and activated with Enter or Space. Focus draws a 3px black outline 4px outside the border, which stays clear of the offset shadow. With prefers-reduced-motion set, hover and press positions change without animating.
Customise it
Set --bb-bg, --bb-ink and --bb-edge on .bb modifiers in plain CSS or on .btn-brutal-* in Bootstrap; the border width is in .bb and --bs-btn-border-width. In Tailwind edit the bg-, text- and shadow-[5px_5px_0_...] utilities.
