Skip navigation

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: