Design Critique: CSS Tricks


I read a lot of blogs. Like, A LOT. Some are about recipes, others are on Israel history/archaeology (random – I know), but most are about programming or design relating to web development.

And there’s no better place then a design-related blog to find awesome design examples. CSS Tricks has some pretty cool effects on their website, but the buttons below are my favorite (bottom of their website, right above the footer):

CSS Tricks - Design

So you may be thinking that these buttons aren’t that amazing. They’re pretty boring. And, I’ll admit, at first they didn’t catch my attention. But then I accidentally hovered over one (the hover effect shown for all of them):

CSS Tricks DesignCSS Tricks Design HoverCSS Tricks Kim Joy Fox Design CritiqueDesign Critique CSS Tricks Kim Joy Fox






Not so boring anymore are they?

So you might be thinking, “it’s just a hover effect! What’s the big deal?” Because to be honest, even though I loved it immediately, I asked myself the same question. WHY do I love it? What makes this one different?


The first, most obvious thing about this hover effect was the massive color change. It starts with a very light grey; they tiptoed right up to the “I can’t read it” line, and stopped. So when you hover over, the colors change is drastic, even for the one that just changes to a dark grey.

The current web design trend for hovers is slight changes, which is why this one really shocks. For example, check out the Google plus button. There is a very slight change in the brightness of the button – just enough feedback for the user to know that it’s a button. But this one goes entirely a different direction with its bold changes.

Add an Image

In the same vein as the bold color changes, they added an image to the button when the user hovers. I love it! Again, adding an image on hover isn’t a normal thing. If you do anything to the button, you make it slightly bigger or slightly darker/lighter.

If I had created those buttons (the hover versions), I would have wanted them to show all the time because they’re just beautiful. The image on the right hand side contained within a half-circle on each button helps lend uniformity to the buttons while at the same time adding a little variety.

But what they did here, removing the image and graying the buttons out was a bold move that really paid off.


Texture is all the rage right now in design; everything has a texture. And CSS Tricks definitely has texture on their website. Because of that, the smooth, clean look of the hover of these buttons simply adds to the button’s beauty.