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. Version: 1.1 Author: Bruce Galpin For documentation please visit http://shrapp.nl/post/google-plus-ui-buttons

by allusis

HTML

<div id="container">
<h1>Google+ Styled Buttons</h1>

<p>Inspired by the web, and Created by Bruce Galpin (Social-IT-e Media).</p>

<p>This is an easy to implement framework of Google+ styled buttons, icon buttons & dropdown menu buttons that look and work great in web applications.</p>

<h3>Download:</h3>

<ul>
  <li><a href="http://code.shrapp.nl/google-plus-ui-buttons/download/index.php?f=google-plus-ui-buttons.zip">Zip Archive: google-plus-ui-buttons.zip</a></li>
  <li><a href="http://code.shrapp.nl/google-plus-ui-buttons/download/index.php?f=google-plus-ui-buttons.rar">Rar Archive: google-plus-ui-buttons.rar</a></li>
</ul>

<h2>Google+ Buttons / Icon Buttons</h2>

<div class="buttons">
  <button><span class="label">Button</span></button>
  
  <a href="#" class="button on"><span class="label">Active</span></a>
  
  <a href="#" class="button left"><span class="label">Left</span></a>
  <a href="#" class="button middle"><span class="label">Middle</span></a>
  <a href="#" class="button right"><span class="label">Right</span></a>
  
  <div class="tiptip">
    <a href="#" class="button left" title="Home"><span class="icon icon108"></span></a>
    <a href="#" class="button middle" title="Photos"><span class="icon icon148"></span></a>
    <a href="#" class="button middle" title="Music"><span class="icon icon134"></span></a>
    <a href="#" class="button right" title="Save"><span class="icon icon67"></span></a>
  </div> <!-- /.tiptip -->
  
  <a href="#" class="button left"><span class="icon icon22"></span></a>
  <a href="#" class="button middle"><span class="icon icon177"></span></a>
  <a href="#" class="button right"><span class="icon icon153"></span></a>
  
  <a href="#" class="button on"><span class="icon icon125"></span></a>
  
  <a href="#" class="button left"><span class="icon icon127"></span></a>
  <a href="#" class="button middle"><span class="icon icon84"></span></a>
  <a href="#" class="button right"><span class="icon icon186"></span></a>
</div> <!--...

CSS

/* Fonts */
@media screen {
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: normal;
  src: local('PT Sans'), local('PTSans-Regular'), url('http://themes.googleusercontent.com/static/fonts/ptsans/v2/LKf8nhXsWg5ybwEGXk8UBQ.woff') format('woff');
}
}
@media screen {
@font-face {
  font-family: 'Molengo';
  font-style: normal;
  font-weight: normal;
  src: local('Molengo'), url('http://themes.googleusercontent.com/static/fonts/molengo/v2/z1JWuCBrQt_Ta83eqIo6Dg.woff') format('woff');
}
}

/* buttons */
/*------------------------------------*\
    CONTENTS
\*------------------------------------*/
/*
WRAPPER
BUTTON
BUTTON LABEL
BUTTON ICON
ICONS
DROPDOWN MENU
*/


/*------------------------------------*\
    $WRAPPER
\*------------------------------------*/
.buttons {/* Style as you wish (toolbar) */}

/* The Magnificent CLEARFIX */
.buttons:before, .buttons:after {
  content: "\0020"; display: block; height: 0; visibility: hidden;    
} 
.buttons:after { clear: both; }
.buttons { zoom: 1; }
/* ------------------------ */


/*------------------------------------*\
    $BUTTON
\*------------------------------------*/
button, 
.button {
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;
    
    font: bold 11px Helvetica, Arial, sans-serif;
    color: #444;
    line-height: 17px;
    height: 18px;
    
    display: inline-block;
    float: left;
    
    margin: 5px;
    padding: 5px 6px 4px 6px;
    
    background: #F3F3F3;
    border: solid 1px #D9D9D9;
    
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    
    -webkit-transition: border-color .20s;
    -moz-transition: border-color .20s;
    -o-transition: border-color .20s;
    transition: border-color .20s;
}
button {
    height: 29px !important;
    cursor: pointer;
}

button.left, 
.button.left {
    margin: 5px 0 5px 5px;
    
    border-top-right-radius: 0;
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-topright: 0;
    
 ...

JavaScript

$(document).ready(function() {
        
            // Toggle the dropdown menu's
            $(".dropdown .button, .dropdown button").click(function () {
                $(this).parent().find('.dropdown-slider').slideToggle('fast');
                $(this).find('span.toggle').toggleClass('active');
                return false;
            });
            
            // Launch TipTip tooltip
            $('.tiptip a.button, .tiptip button').tipTip();
        
        });
        
        // Close open dropdown slider by clicking elsewhwere on page
        $(document).bind('click', function (e) {
            if (e.target.id != $('.dropdown').attr('class')) {
                $('.dropdown-slider').slideUp();
                $('span.toggle').removeClass('active');
            }
        });