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.

Download:

Documentation:

Browser Support: Firefox, Chrome, Safari, IE7+
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.
New Gmail buttons

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 + Button

I am going to create Google-styled buttons for common web app actions: adding, deleting, saving, flagging, and rankingIconFinder 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: leftmiddle, or right. To use icons for common actions, I will add a third class: adddeletesaveflagup, or down. And for larger buttons, a fourth class: big.

Download

Google UI Pack – Icons, Buttons, Drop menu

The pack provides Google+ Action ButtonsGoogle+ 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.

Download Google UI Pack

https://w3lessons.info/wp-content/uploads/2011/10/newsdf_031.jpghttps://w3lessons.info/wp-content/uploads/2011/10/newsdf_031-150x150.jpgkarthikeyanCSS3FreebiesjqueryWeb DesignButton,google+,JqueryGoogle+ 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. Download:Zip Archive: google-plus-ui-buttons.zip Rar Archive: google-plus-ui-buttons.rarDocumentation:Shrapp.nl — Google+ UI ButtonsBrowser Support: Firefox, Chrome, Safari, IE7+Google's new look features some pretty slick buttons, seen here in...PHP, HTML5, CSS, jQuery, Angular, Facebook Style Scripts & demos

Related Posts