Skip navigation

Tag Archives: buttons

Buttons are one of the major action triggers in UI design for the web. So, it’s imperative to get them right. There are tonnes of tutorials out there on the web on how to style buttons, and though the beauty of web designing is the chance offered to the designer to be creative (as opposed to desktop design where the UI guidelines mandate a more or less similar look and feel), a clear trend has emerged in button design for Web 2.0 sites.

While fiddling around a site – Handcraft, somehow, my eyes were finding the buttons a bit jarring, so I decided to investigate what was going on.

Here’s a button that is displayed on the site.

Maybe, it’s my eyes, but I really find that shadow too pronounced, reminds me of the shadows in Powerpoint 97. The CSS of the site says:

-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 1);

I changed it to reduce the opacity to 0.5, softened the rounded corners a bit, and added a bit more weight to the heading and it looked much better. Since the background of the whole section was light blue, I just couldn’t resist putting in 2.0 style insets.

I am not suggesting that the original CSS of the site is wrong in any way. I just think the minor tweaks, especially to the button shadows, made it better for my eyes.