Google+ button improvements

Original: http://jsfiddle.net/csswizardry/S9Gz8/

by Jens Grochtdreis

HTML

<p>
    <a href="#" class="button">Stand alone</a>
</p>

<ul class="buttons cf">
    <li><a href="#" class="button">Left</a></li>
    <li><a href="#" class="button">Link</a></li>
    <li><a href="#" class="button">Link</a></li>
    <li><a href="#" class="button">Link</a></li>
    <li><a href="#" class="button">Right</a></li>
</ul>

<p>
    <a href="#" class="button big">Stand alone</a>
</p>

<ul class="buttons cf">
    <li><a href="#" class="button big">Left</a></li>
    <li><a href="#" class="button big">Link</a></li>
    <li><a href="#" class="button big">Link</a></li>
    <li><a href="#" class="button big">Link</a></li>
    <li><a href="#" class="button big">Right</a></li>
</ul>

CSS

html{
    font:0.75em/1.5 Arial, sans-serif;
}

/* Buttons */
.button{
    display:inline-block;
    padding:0.5em 1em;
    font-weight:bold;
    text-decoration:none;
    color:#6e6e6e;
    background:#f3f3f3;
    border:1px solid #dcdcdc;
    
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
}
.button:hover{
    color:#000;
    border-color:#444;
    position:relative;
    z-index:2;
    
    -moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);
    -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.15);
    box-shadow:0 1px 2px rgba(0,0,0,0.15);
}
/* Because we set padding in ems all we need to do to increase the overall size of the button is change its font-size. */
.big{
    font-size:1.333em; /* 16px; */
}

/* Button groups */
.buttons{
    list-style:none;
}
.buttons li{
    float:left;
}
.buttons .button{
    margin-left:-1px; /* Overlap the buttons to remove the illusion of double borders. */
    -moz-border-radius:0;
    -webkit-border-radius:0;
    border-radius:0;
}
.buttons li:first-child .button{
    margin-left:0; /* Give the first one a normal margin. */
    -moz-border-radius:2px 0 0 2px;
    -webkit-border-radius:2px 0 0 2px;
    border-radius:2px 0 0 2px;
}
.buttons li:last-child .button{
    -moz-border-radius:0 2px 2px 0;
    -webkit-border-radius:0 2px 2px 0;
    border-radius:0 2px 2px 0;
}

/* Shared */
p,
.buttons{
    margin-bottom:1.5em;
}

/* Clearfix */
/*
Big up @necolas
*/
/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}