cara membuat Google Plus buttons style

Cara membuat Google Plus buttons style - tutorial cara membuat Google Plus buttons style yang memang pada dasarnya cara membuat Google Plus buttons style sangat menarik dan sedap dipandang mata. cara membuat Google Plus buttons style memiliki tampilan sederhana sebenarnya, tapi karena pengaruh nama situs terbesar sejagat raya ini akhirnya Google Plus buttons style ini juga menjadi pilihan banyak orang termasuk blogger sendiri. Untuk melihat demonya saya pikir anda sudah sering melihat tapi untuk demo tampilan tutorial ini silahkan kunjungi link demo dibawah, bila anda tertarik untuk memasang Google Plus buttons style ini pada setiap button blogspot anda silahkan simak tutorial dibawah ini..

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

button {
text-decoration: none;
text-shadow: 0px 1px 0px rgb(255, 255, 255);
font: bold 11px/17px Helvetica,Arial,sans-serif;
display: inline-block;
float: left;
margin: 5px;
padding: 5px 6px 4px;
border: 1px solid rgb(217, 217, 217);
border-radius: 2px;
transition: border-color 0.2s ease 0s;
height: 29px !important;
cursor: pointer;
color: rgb(68, 68, 68);
background: none repeat scroll 0% 0% rgb(247, 247, 247);
}
button:hover {
background: #F4F4F4;
border-color: #C0C0C0;
color: #333;
box-shadow:0 0 2px #ccc;
}
button:active {
border-color: #4D90FE;
color: #4D90FE;
-moz-box-shadow:inset 0 0 10px #D4D4D4;
-webkit-box-shadow:inset 0 0 10px #D4D4D4;
box-shadow:inset 0 0 10px #D4D4D4;
}
/* CSS button warna Biru */
button.bluebtn {
border: 1px solid #3079ED !important;
background: #4B8DF8;
background: -webkit-linear-gradient(top, #4C8FFD, #4787ED);
background: -moz-linear-gradient(top, #4C8FFD, #4787ED);
background: -ms-linear-gradient(top, #4C8FFD, #4787ED);
background: -o-linear-gradient(top, #4C8FFD, #4787ED);
-webkit-transition: border .20s;
-moz-transition: border .20s;
-o-transition: border .20s;
transition: border .20s;
}
button.bluebtn:hover {
border: 1px solid #2F5BB7 !important;
background: #6099F9;
background: -webkit-linear-gradient(top, #6099F9, #076BDA);
background: -moz-linear-gradient(top, #6099F9, #076BDA);
background: -ms-linear-gradient(top, #6099F9, #076BDA);
background: -o-linear-gradient(top, #6099F9, #076BDA);
}
/* CSS button warna Hijau */
button.greenbtn {
border: 1px solid #29691D !important;
background: #3A8E00;
background: -webkit-linear-gradient(top, #3C9300, #398A00);
background: -moz-linear-gradient(top, #3C9300, #398A00);
background: -ms-linear-gradient(top, #3C9300, #398A00);
background: -o-linear-gradient(top, #3C9300, #398A00);
-webkit-transition: border .20s;
-moz-transition: border .20s;
-o-transition: border .20s;
transition: border .20s;
}
button.greenbtn:hover {
border: 1px solid #2D6200 !important;
background: #4ABB00;
background: -webkit-linear-gradient(top, #4ABB00, #368200);
background: -moz-linear-gradient(top, #4ABB00, #368200);
background: -ms-linear-gradient(top, #4ABB00, #368200);
background: -o-linear-gradient(top, #4ABB00, #368200);
}
/* CSS button warna Merah */
button.redbtn {
border: 1px solid #D14836 !important;
background: #D64937;
background: -webkit-linear-gradient(top, #DC4A38, #D14836);
background: -moz-linear-gradient(top, #DC4A38, #D14836);
background: -ms-linear-gradient(top, #DC4A38, #D14836);
background: -o-linear-gradient(top, #DC4A38, #D14836);
-webkit-transition: border .20s;
-moz-transition: border .20s;
-o-transition: border .20s;
transition: border .20s;
}
button.redbtn:hover {
border: 1px solid #B0281A !important;
background: #D14130;
background: -webkit-linear-gradient(top, #DC4A38, #C53727);
background: -moz-linear-gradient(top, #DC4A38, #C53727);
background: -ms-linear-gradient(top, #DC4A38, #C53727);
background: -o-linear-gradient(top, #DC4A38, #C53727);
}
button.action:hover {
-moz-box-shadow: 0 1px 0px #DDD;
-webkit-box-shadow: 0 1px 0px #DDD;
box-shadow:iset 0 1px 0px #DDD;
}
button.action:active {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border-color: #C6C6C6 !important;
}
button.bluebtn:active {border-color: #2F5BB7 !important;}
button.greenbtn:active {border-color: #2D6200 !important;}
button.redbtn:active {border-color: #B0281A !important;}
button span.label {
display: inline-block;
float: left;
line-height: 17px;
height: 18px;
padding: 0 1px;
overflow: hidden;
color: #444;
-webkit-transition: color .20s;
-moz-transition: color .20s;
-o-transition: color .20s;
transition: color .20s;
}
button span.label {line-height: 15px !important;}
button:hover .label.bluebtn {color: #7090C8;}
button:hover .label.greenbtn {color: #42B449;}
button:hover .label.yellow {color: #F7CB38;}
button.bluebtn .label {color: #FFF !important;text-shadow: 0 1px 0 #2F5BB7 !important;}
button.greenbtn .label {color: #FFF !important;text-shadow: 0 1px 0 #2D6200 !important;}
button.redbtn .label {color: #FFF !important;text-shadow: 0 1px 0 #B0281A !important;}
button.action .label {padding: 0 17px !important;}
button.action:active .label {color: #333 !important;}
button.bluebtn:active .label, button.greenbtn:active .label, button.redbtn:active .label {color: #FFF !important;}

Install Program Tag HTML

• Setelah anda sudah memasang CSS cara membuat Google Plus buttons style saatnya anda memasang kode htmlnya.
• Copy code cara membuat Google Plus buttons style dibawah ini dan pasang diblog anda...
  

<a href="http://www.ideblogspot.com/" target="_blank">
<button class="action bluebtn"><span class="label">Save</span></button></a>
<a href="http://www.ideblogspot.com/" target="_blank">
<button class="action redbtn"><span class="label">Upload</span></button></a>
<a href="http://www.ideblogspot.com/" target="_blank">
<button class="action greenbtn"><span class="label">Comment</span></button></a>
<a href="http://www.ideblogspot.com/" target="_blank">
<button class="action"><span class="label">Cancel</span></button></a>

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit