Cara membuat flat button 3d cantik di blogger atau blogspot

Tutorial kali ini saya akan membahas bagaimana cara membuat flat button 3d cantik di blogger atau blogspot anda, seperti di blog ini. Untuk trik disini kita cukup memanfaatkan efek ketebalan box-shadow ketika button normal, di hover atau ketika button aktif. Logikanya ketika button normal box-shadow akan terlihat tebal, ketika pengunjung menghover button maka box-shadow di button akan terlihat lebih tipis dan ketika button aktif maka box-shadow akan hilang.

Dengan memanfaat warna metro dan tampilan yang flat button akan semakin cantik dan membuat blog kita akan terlihat sedikit cantik dan profesional.

Langsung berikut adalah langkah langkah nya:
1. Silahkan backup terlebih dahulu template bawaan anda, berikut adalah tutorial cara backup template blogger:
Cara mudah backup template blogger atau blogspot

2. Selanjut anda edit template blogger anda, jika anda tidak tahu cara edit template blogger berikut adalah cara edit template blogger:
Cara edit template blogger atau blogspot

3. Setelah masuk ke halaman editor template anda, taruh kode berikut sebelum kode ]]></b:skin> atau </style>:

/* CSS button */
.gmr-btn {background-color: #3498DB;box-shadow: 0px 6px #2980B9;-moz-box-shadow: 0px 6px #2980B9;-webkit-box-shadow: 0px 6px #2980B9;-webkit-transition: none;-moz-transition: none;transition: none;display: inline-block;padding:10px 40px;margin: 0 0 10px 0;vertical-align: middle;font-size: 16px;border:none !important;color: #fff !important;text-decoration: none !important;}
.gmr-btn:hover{top:4px;position:relative;box-shadow: 0px 2px #2980B9;-moz-box-shadow: 0px 2px #2980B9;-webkit-box-shadow: 0px 2px #2980B9;}
.gmr-btn-red{background-color: #E74C3C;box-shadow: 0px 6px #BD3E31;-moz-box-shadow: 0px 6px #BD3E31;-webkit-box-shadow: 0px 6px #BD3E31;}
.gmr-btn-red:hover{box-shadow: 0px 2px #BD3E31;-moz-box-shadow: 0px 2px #BD3E31;-webkit-box-shadow: 0px 2px #BD3E31;}
.gmr-btn-green{background-color: #82BF56;box-shadow: 0px 6px #669644;-moz-box-shadow: 0px 6px #669644;-webkit-box-shadow: 0px 6px #669644;}
.gmr-btn-green:hover{box-shadow: 0px 2px #669644;-moz-box-shadow: 0px 2px #669644;-webkit-box-shadow: 0px 2px #669644;}
.gmr-btn-yellow{background-color: #F2CF66;box-shadow: 0px 6px #D1B358;-moz-box-shadow: 0px 6px #D1B358;-webkit-box-shadow: 0px 6px #D1B358;}
.gmr-btn-yellow:hover{box-shadow: 0px 2px #D1B358;-moz-box-shadow: 0px 2px #D1B358;-webkit-box-shadow: 0px 2px #D1B358;}
.gmr-btn-gray{background-color: #95a5a6;box-shadow: 0px 6px #7f8c8d;-webkit-box-shadow: 0px 6px #7f8c8d;-moz-box-shadow: 0px 6px #7f8c8d;}
.gmr-btn-gray:hover{box-shadow: 0px 2px #7f8c8d;-moz-box-shadow: 0px 2px #7f8c8d;-webkit-box-shadow: 0px 2px #7f8c8d;}
.gmr-btn-purple{background-color: #9b59b6;box-shadow: 0px 6px #8e44ad;-moz-box-shadow: 0px 6px #8e44ad;-webkit-box-shadow: 0px 6px #8e44ad;}
.gmr-btn-purple:hover{box-shadow: 0px 2px #8e44ad;-moz-box-shadow: 0px 2px #8e44ad;-webkit-box-shadow: 0px 2px #8e44ad;}
.gmr-btn-orange{background-color: #e67e22;box-shadow: 0px 6px #d35400;-moz-box-shadow: 0px 6px #d35400;-webkit-box-shadow: 0px 6px #d35400;}
.gmr-btn-orange:hover{box-shadow: 0px 2px #d35400;-moz-box-shadow: 0px 2px #d35400;-webkit-box-shadow: 0px 2px #d35400}
.gmr-btn-dark{background-color: #34495e;box-shadow: 0px 6px #2c3e50;-moz-box-shadow: 0px 6px #2c3e50;-webkit-box-shadow: 0px 6px #2c3e50;}
.gmr-btn-dark:hover{box-shadow: 0px 2px #2c3e50;-moz-box-shadow: 0px 2px #2c3e50;-webkit-box-shadow: 0px 2px #2c3e50;}
.gmr-btn-block{width:100%;position:relative;display:block;text-align:center;}
.gmr-btn:active{top:6px;position:relative;box-shadow: none;-moz-box-shadow: none;-webkit-box-shadow: none;}

4. Cara penggunaannya anda cukup memasukkan kode class nya saja di button anda class='gmr-btn' pada template anda, atau kalau memasukkan di postingan anda bisa memasukkan kode class="gmr-btn". Untuk block button atau button dengan width 100% anda bisa memasukkannya class class="gmr-btn gmr-btn-block". Untuk memasukkan warna anda bisa cukup memasukkan class="gmr-btn gmr-btn-red gmr-btn-block" maka button anda berwarna merah dengan width 100%. Berikut adalah contoh html yang sudah saya buat.


<button class="gmr-btn">Button 1</button>
<button class="gmr-btn gmr-btn-red">Button 2</button><br />
<button class="gmr-btn gmr-btn-green">Button 3</button>
<button class="gmr-btn gmr-btn-yellow">Button 4</button><br />
<button class="gmr-btn gmr-btn-gray">Button 5</button>
<button class="gmr-btn gmr-btn-purple">Button 6</button><br />
<button class="gmr-btn gmr-btn-orange">Button 7</button>
<button class="gmr-btn gmr-btn-dark">Button 8</button><br />
<button class="gmr-btn gmr-btn-dark gmr-btn-block">Button 9</button>