Button Google Plus CSS3 For blog

Salam hangat,lagi lagi kita jumpa masih dalam pembahasan masalah tampilan button,setelah sebelumnya saya membahas Button CSS Hover Style,kini saya akan coba posting cara merubah tampilan button untuk google plus dengan css,memang cukup menarik bilamana blog kita di hiasi dengan tampilan tampilan CSS yang memberikan keindahan tersendiri baik buat kita selaku pemilik blog atau pengunjung sekalipun,buta sobat yang mau coba bisa ikuti tutorialnya di bawah ini.

Demo

1. login terlebih dahulu.
2. Pilih Template > Edit HTML,centang Expand Widget Templates.
3. Cari kode ]]></b:skin> (gunakan CTRL+F).
4. Letakan kode di bawah ini tepat di atas kode ]]></b:skin>.

<style>
.PlusGreen {
    display: inline-block;
    background: #45ad45;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#47af47), color-stop(100%,#43ab43));
    background: -moz-linear-gradient(center top, #47af47 0%, #43ab43 100%);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: background-color .218ss 0;
    -moz-transition: background-color .218ss 0;
    -o-transition: background-color .218ss 0;
    transition: background-color .218ss 0;
    text-shadow: 1px 0px 0px #1a8f1a;
    padding: 7px 12px;
    margin: 0px 12px 0px 0px;
    display: inline-block;
    border-color: #1a8f1a;
    border-width: 1px;
    border-style: solid;
    text-decoration: none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #ffffff;
    font-weight: bold;
}
.PlusGreen:hover {
    background: #33a833;
    -webkit-box-shadow: 1px 1px #d8d8d8;
    -moz-box-shadow: 1px 1px #d8d8d8;
    box-shadow: 1px 1px #d8d8d8;
    text-shadow: 1px 1px 0px #284c28;
    border-color: #284c28;
}
.PlusGreen:active {
    background: #359c35;
    -webkit-box-shadow: 1px 1px 3px #329432 inset;
    -moz-box-shadow: 1px 1px 3px #329432 inset;
    box-shadow: 1px 1px 3px #329432 inset;
    border-color: #2d4d2d;
}

.PlusYellow {
    display: inline-block;
    background: #fbfb00;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FCFD22), color-stop(100%,#f9f911));
    background: -moz-linear-gradient(center top, #FCFD22 0%, #f9f911 100%);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    text-shadow: 1px 1px 0px #FFFFF;
    padding: 7px 12px;
    margin: 0px 12px 0px 0px;
    display: inline-block;
    border-color: #e4e416;
    text-decoration: none;
    border-width: 1px;
    border-style: solid;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #6E6E6E;
    font-weight: bold;
}
.PlusYellow:hover {
    background: #ffff19;
    -webkit-box-shadow: 1px 1px #d8d8d8;
    -moz-box-shadow: 1px 1px #d8d8d8;
    box-shadow: 1px 1px #d8d8d8;
    text-shadow: 1px 1px 0px #ffe01a;
    border-color: #ffe01a;
    color: #333;
}
.PlusYellow:active {
    color: #000;
}
.PlusGray {
    display: inline-block;
    background: #f3f3f3;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#f1f1f1));
    background: -moz-linear-gradient(center top, #f5f5f5 0%, #f1f1f1 100%);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: border-color .218s 0;
    -moz-transition: border-color .218s 0;
    -o-transition: border-color .218s 0;
    transition: border-color .218s 0;
    text-shadow: 1px 1px 0px #ffffff;
    padding: 7px 12px;
    margin: 0px 12px 0px 0px;
    display: inline-block;
    text-decoration: none;
    border-color: #DCDCDC;
    border-width: 1px;
    border-style: solid;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #6E6E6E;
    font-weight: bold;
}
.PlusGray:hover {
    -webkit-box-shadow: 0px 2px #00002;
    -moz-box-shadow: 0px 2px #00002;
    box-shadow: 0px 2px #00002;
    border-color: #999;
    color: #333;
}
.PlusGray:active {
    -webkit-box-shadow: 1px 1px 3px #dedede inset;
    -moz-box-shadow: 1px 1px 3px #dedede inset;
    box-shadow: 1px 1px 3px #dedede inset;
    border-color: #444;
    color: #000;
}
.PlusBlue {
    display: inline-block;
    background: #3079ed;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#327BEF), color-stop(100%,#2E77EB));
    background: -moz-linear-gradient(center top, #327BEF 0%, #2E77EB 100%);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: border-color .218s 0;
    -moz-transition: border-color .218s 0;
    -o-transition: border-color .218s 0;
    transition: border-color .218s 0;
    text-shadow: 1px 0px 0px #1a378e;
    padding: 7px 12px;
    margin: 0px 12px 0px 0px;
    display: inline-block;
    border-color: #0066cc;
    text-decoration: none;
    border-width: 1px;
    border-style: solid;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #ffffff;
    font-weight: bold;
}
.PlusBlue:hover {
    background: #2D71EE;
    -webkit-box-shadow: 1px 1px #d8d8d8;
    -moz-box-shadow: 1px 1px #d8d8d8;
    box-shadow: 1px 1px #d8d8d8;
    text-shadow: 1px 1px 0px #001AA6;
    border-color: #291f93;
}
.PlusBlue:active {
    background: #2A69EF;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#327aef), color-stop(100%,#2e76eb));
    background: -moz-linear-gradient(center top, #327aef 0%, #2e76eb 100%);
    -webkit-box-shadow: 1px 1px 3px 0px #0066cc inset;
    -moz-box-shadow: 1px 1px 3px 0px #0066cc inset;
    box-shadow: 1px 1px 3px 0px #0066cc inset;
    text-shadow: 1px 1px 0px #001AA6;
    border-color: #444444;
}
.PlusRed {
    display: inline-block;
    text-decoration: none;
    background: #eb3232;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FC2222), color-stop(100%,#F81111));
    background: -moz-linear-gradient(center top, #FC2222 0%, #F81111 100%);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: background-color .218s 0;
    -moz-transition: background-color .218s 0;
    -o-transition: background-color .218s 0;
    transition: background-color .218s 0;
    text-shadow: 1px 1px 0px #a60000;
    padding: 7px 12px;
    margin: 0px 12px 0px 0px;
    display: inline-block;
    border-color: #cc0000;
    border-width: 1px;
    border-style: solid;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #ffffff;
    font-weight: bold;
}
.PlusRed:hover {
    -webkit-box-shadow: 1px 1px #d8d8d8;
    -moz-box-shadow: 1px 1px #d8d8d8;
    box-shadow: 1px 1px #d8d8d8;
    text-shadow: 1px 1px 1px #a60000;
    border-color: #912020;
}
.PlusRed:active {
    background: #ed2b2b;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ed3232), color-stop(100%,#eb2f2f));
    background: -moz-linear-gradient(center top, #ed3232 0%, #eb2f2f 100%);
    -webkit-box-shadow: 1.5px 1.5px 3px #cc0000 inset;
    -moz-box-shadow: 1.5px 1.5px 3px #cc0000 inset;
    box-shadow: 1.5px 1.5px 3px #cc0000 inset;
    border-color: #ad4b4b;
}
</style>

5. Kemudian save

Untuk penggunaanya,silahkan sobat buat dalam postingan dan letakan/pilih salah satu kode yang di perlukan dan letakan pada bagian HTML bukan Compase.

<a href="#" class="PlusGreen">Google+ Green</a>
<a href="#" class="PlusBlue">Google+ Blue</a>
<a href="#" class="PlusRed">Google+ Red</a>
<a href="#" class="PlusYellow">Google+ Yellow</a>
<a href="#" class="PlusGray">Google+ Gray</a>

Gimana mudah kan,buat yang tertarik selamat mencoba semoga berhasil.