← All elements
<button class="bo">Add to cart</button>About this button
A flat button with a hard offset shadow that collapses as it is pressed, for a bold neo-brutalist look.
How it works
The look comes from a thick black border and a solid black box-shadow with no blur. Hovering shifts the button up-left and lengthens the shadow, and pressing moves it fully onto the shadow position while the shadow shrinks to nothing.
Ways to customise it
- Change the face and hover colours.
- Edit 6px for a deeper shadow.
- Round the corners to zero for a harder style.
Good to know
High contrast black on any light colour is very readable. The :active state gives clear press feedback, and the focus ring uses a different colour for visibility.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.