Hipster Button

Flat design is all the rage. And now that Apple is in the process of ditching its trademark skeumorphic designs for flatter pastures, we can expect to see much more of it.

Hell, it’s already all around us. My mom even asked me about it, so you know it’s inescapable at this point.

For all the wonderful things flat design does to make web design and coding easier, it is also highly criticized for being boring. And it is. At least if it’s executed poorly. So, designers have been adding things like long shadows, heavy and blurry images to add distinction to their work.

But even that’s catching on and becoming a cliche. If flat design has brought a new level of authenticity and minimalism to our designs, then I think it has also created craving for distinction and uniqueness. We see this in how many new sites generally look the same. Many designers are on the same bandwagon, follow the same blogs, share the same code and are merely trying to keep pace with the latest trends.

I’m not saying it’s wrong. It’s just the way it is. Flat design leaves little to the imagination, so we clamor for improvements and enhancements when we see them.

Anyway, I didn’t really intend for this to be an opinion piece, though it’s already crossed that line. Instead, I wanted to point out a flat site I came across that I actually really like. So, check out The Paint Drop. Go ahead, I’ll wait.

Yes, it has all the flat colors, long shadows and bold fonts you would expect from a flat design, but there is still a lot of character to it. I thought I would recreate the primary button style and show you how I did it.

Without further ado, I present the Hipster Button!

One Element, No Divs

First thing I noticed about the site’s CSS is that it used multiple classes to style the buttons. Plus, they look like buttons, but they don’t even use the button element in their HTML markup.

So, I set out to simplify the code so it is semantic and requires less markup, just using one button element. To do this, we use the ::before and ::after pseudo-elements to draw things in. The ::before class will represent the icon on the left and ::after will represent the call to action on the right.

Mo’ Flatter, Mo’ Betta!

We can bet Sir Mix-a-Lot hates flat design, but we’re going to move ahead anyway. This button is flat, but it adds some nice depth with a thick bottom border and a dark and light border between the icon and call to action.

The bottom border can be applied directly to the button element. Done and handled.

The borders between the pseudo-elements is where it gets a little trickier. We can get that effect by giving ::before a solid dark right border and ::after a solid light border. I had to play around with the padding for each to get the spacing where it felt right.

Make it Move

Flat doesn’t have to be boring. When we click this button, it would be nice if they button actually felt like it was being pressed when clicked. that’s pretty easy for this button.

Add a :hover class and set it to border: none; and there you go. The border goes away, which causes the button to look less like a 3D box and more like a flat rectangle.

Here’s the final result. Enjoy!

[codepen_embed height=”350″ theme_id=”279″ slug_hash=”dlLEK” default_tab=”result”]See the Pen Hipster Button by Geoff Graham (@geoffgraham) on CodePen.[/codepen_embed]