Cara Membuat Button Keren Di Blogger

Hari ini saya mau berbagi kembali mengenai Cara Membuat Button Keren Di Blogger. Button ini sangat keren dan saya gunakan juga di template ini. Mengusung konsep 3D Flat Desain, dimana button ini memanfaatkan efek box-shadow ketika button normal, dan menipiskan box-shadow ketika button di tekan atau ketika terkena cursos.

Oleh karena itu tampilan button ini sangat cocok untuk template blog ini, memang sudah include juga sih saya hanya perlu menambahkan class pada saat ingin menggunakan button 3D Flat tersebut.

Nah untuk yang tidak menggunakan template SeoFastBlogger Responsive, kamu bisa mencoba button 3D flat desain tersebut. Untuk langkah-langkahnya kamu bisa mengikutinya dibawah ini ya.

Langkah pertama, kamu harus login terlebih dahulu ke Blogger.
Langkah kedua, kamu masuk ke menu Tema lalu Edit HTML.
Langkah ketiga, setelah itu kamu salin kode dibawah ini tepat diatas 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;}

Langkah Terakhir adalah pemasangan button nya, kamu bisa menempatkan button tersebut dimana saja di dalam postingan blog, contoh kamu ingin membuat tombol download, kamu hanya perlu menggunakan code : <a href="#" class="gmr-btn"></a> atau jika kamu ingin mengganti warnanya kamu hanya perlu menambahkan kode gmr-btn-red di dalam classnya, contoh: <a href="#" class="gmr-btn gmr-btn-red"></a>. Untuk contoh membuat button panjang, tinggal tambahkan code gmr-btn-block didalam class, contoh: <a href="#" class="gmr-btn gmr-btn-red gmr-btn-block"></a>. Nah untuk list button nya silahkan cek dibawah.

<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>

Nah tinggal cobain yang kamu sukai, untuk demo silahkan klik tombol demo dibawah.

Demo

Mungkin hanya segitu tutorial Membuat Button Keren dengan Style 3D Flat Desain Di Blogger. Tutorial ini saya dapat dari konfigurasi template blog ini sendiri yaitu dari kang gianmr dan di publikasikan kembali oleh Kang Gira. Semoga tutorial ini bermanfaat.

Jika ada kesulitan silahkan berkomentar.