Create a Brutalist Style button in CSS

Brutalism or Brutalist architecture was a famous style in the 1950s although it went out of style in the 1970s, the once-popular and true-to-the-element style still remains. Brutalism was generally characterized by its rough, unfinished surfaces, unusual shapes, heavy-looking materials. One of the reasons for it to be criticized and to decline was that it was regarded as inhuman and unwelcoming.

A house with Brutalist architecture
http://www.home-designing.com/brutalist-concrete-house-exterior-facade-design-inspiration-photos

Brutalism is not only used in architecture, it is widely used in Web designing as well. The concept of a brutalist website is that it will be true to its elements and use HTML as intended with very few custom styles. Brutalist Websites has a wide range of websites that you can take inspiration from.

Let's see how we can create a simple Brutalist Style button in CSS. We will be using the pseudo-element ‘:after’ in CSS to create the shadow.

Let’s create the HTML element 1st and give it a class name. In this case, I’m naming the class as ‘brutal-btn’.

and it will look like this :

Simple HTML button

Then let's style the button as usual.

And the result is :

Styled button

Looks better now! That's not enough. Let's give it a hard shadow to emphasize and give it a more Brutalist look.

And the result is :

Styled button with shadow

Here in the code, you can see that I have used the pseudo-element “:after” to get the shadow effect and given it a z-index of -1 to send it behind the button.

That's it! There's your Brutalist Style button. 😉 Feel free to change the code and go crazy 🤡

Additionally to make the button look more interactive, style the hover and active effects too.

.brutal-btn:hover:after,brutalist-btn:hover:active{
background-color:white;
border:2px solid green;
transition: all 0.3s ease;
}

Here’s the codepen for the project 👉

Photographer | Software Engineer | Graphic Designer