Google+ UI Icons, buttons, labels, dropmenu using Jquery and CSS3
Google+ Styled Buttons
This is an easy to implement framework of Google+ styled buttons, icon buttons & dropdown menu buttons that look and work great in web applications.
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
#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 + Button
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:
right. To use icons for common actions, I will add a third class:
down. And for larger buttons, a fourth class:
Google UI Pack – Icons, Buttons, Drop menu
The pack provides Google+ Action Buttons, Google+ Icon Buttons with Label, Dropdown Menu Buttons and over 200+ Google+ icons. Every icon has hover stat which works great and most modern browser. The compatibility of of this Google UI set is set to Firefox, Chrome, Safari and IE7+.
The pack is under Creative Commons Attributions and you are free to use them in commercial projects, modify them, adapted them or anything that comes in your mind.