Google Style CSS3 Buttons

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

We all love Google and all of it's content and buttons are one of it.You can use these buttons on your html documents , blogger , wordpress and all html/css supported services , Let's start with CSS :

• Go To Blogger > Template > Edit HTML > Paste following CSS just above ]]></b:skin> :

.buttons {
    float: left;
    padding-bottom: 20px;
    clear: both;
}
a.button {
    color: #6e6e6e;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin-right: 10px;
}
a.button:hover {
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
a.button:active {
    color: #000;
    border-color: #444;
}
a.left {
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-topright: 0;
    border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-radius-bottomright: 0;
    border-bottom-right-radius: 0;
    margin: 0;
}
a.middle {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-left: solid 1px #f3f3f3;
    margin: 0;
    border-left: solid 1px rgba(255, 255, 255, 0);
}
a.middle:hover,
a.right:hover { border-left: solid 1px #999 }
a.right {
    -webkit-border-top-left-radius: 0;
    -moz-border-radius-topleft: 0;
    border-top-left-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-bottomleft: 0;
    border-bottom-left-radius: 0;
    border-left: solid 1px #f3f3f3;
    border-left: solid 1px rgba(255, 255, 255, 0);
}
a.big {
    font-size: 16px;
    padding: 10px 15px;
}
a.supersize {
    font-size: 20px;
    padding: 15px 20px;
}

How To Add :

These buttons are available in two sizes normal and big :

Normal :

<a href="#" class="button">Stand Alone</a>
<a href="#" class="button left">Left</a>
<a href="#" class="button middle">Middle</a>
<a href="#" class="button middle">Middle</a>
<a href="#" class="button right">Right</a>
<a href="#" class="button">Stand Alone</a>

Big :

<a href="#" class="button big">Stand Alone</a>
<a href="#" class="button left big">Left</a>
<a href="#" class="button middle big">Middle</a>
<a href="#" class="button middle big">Middle</a>
<a href="#" class="button right big">Right</a>
<a href="#" class="button big">Stand Alone</a>

That's it.....

Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.