Use Google+ to Improve Your UI

Google rolled out a new design across many of their services as part of the Google+ launch. The new look presents a sleeker, simplified Google that puts the emphasis on your data and not on the interface. Part of the design's success are the new buttons. Great UIs tend to have simple, obvious buttons that are standard across the entire application. I have created Google-styled buttons that you can apply to your app's UI.

The New Look

Google's new look features some pretty slick buttons, seen here in Gmail's new UI. You can apply this theme to Gmail by going to Mail Settings > Themes and selecting Preview or Preview Dense theme.

The buttons don't overuse the gradient, shadow, or glow effects that plague many web apps. Google is using some of these effects so slyly you can't tell it's there (such as a linear background gradient from #F1F1F1 to #F5F5F5). They have a strong hover state that makes the button come to life when you mouse over them.

The buttons are built entirely in CSS, with an image sprite for the highlight buttons (+ and -). Image sprites are a handy trick for creating buttons: they let you include images in your buttons. I will use a sprite to associate icons with familiar actions. Learn more about image sprites here.

Creating Google Buttons

I am going to create Google-styled buttons for common web app actions: adding, deleting, saving, flagging, and ranking. IconFinder has a large selection of icons you can use to build your buttons. The icons I've chosen are at left. I like the style of grouping similar buttons, so let's add support for grouping.

I want to be able to easily add these buttons anywhere in my app. To do so, I just want to add a single CSS class to my links: button. To indicate grouped buttons I will add a second class: left, middle, or right. To use icons for common actions, I will add a third class: add, delete, save, flag, up, or down. And for larger buttons, a fourth class: big.

Buttons Demo

You may also like Use Apple OS X to Improve Your UI

Whatever your preference for buttons is, being consistent and making buttons obvious are imperative. You can easily adjust these to meet your needs or fit your designs.

Support: Firefox, Chrome, Safari, IE7+, IE6 (via Fireworks PNG transparency fix)
License: Creative Commons CC-BY (give attribution if you want to)