Membuat Tombol Demo dan Download Di Dalam Postingan Blog

Sekarang ini perkembangan dalam dunia design Website sangat pesat dan mudah untuk di pelajari, berbagai Tools dari pengembang di sediakan untuk para Developver Website. Tidak kalah ketinggalan juga di dunia Blogging pun sudah banyak Blogger yang memposting dan membagikan Template Blog hasil buatannya untuk dibagikan bahkan secara Gratis alis Free. Seperti template buatan KompiAjaib dan Arlina Design yang tentu sudah tidak asing lagi di dunia Blogger khususnya, dan saya akui template buatan mereka sangat bagus dan designnya yang tidak kalah dengan buatan template luar negri.

Nah bicara pengembangan template dan website tentu kita sering melihat terdapatnya tombol-tombol yang ada didalam postingan tersebut yaitu yang sering kita lihat adalah tombol Demo dan Tombol Download yang tujuannya memudahkan pengunjung untuk mencoba dan melihat hasil karya dari si Pengembang Template tersebut jika dirasa cocok pengunjung akan memakai dan ada juga yang hanya sekedar mencobanya.

Terkait hal tersebut di postingan kali ini akan kita bahas Cara Membuat Tombol Demo dan Download Di Dalam Postingan Blog, bagi sobat yang mau mencobanya mari kita bahas bersama.

Langkah Pertama

Silahkan sobat salin kode CSS dibawah ini lalu letakkan sebelum kode ]]></b:skin> atau </style>

/* Dibalik Seo Material Button */
#wrap{margin:20px auto;text-align:center}
#wrap a{text-decoration:none}
.tombolripple{cursor:pointer!important;overflow:hidden;text-decoration:none;display:inline-block;-webkit-appearance:none;font-size:1.7em;border-radius:4px;color:rgba(255,255,255,0.8);font-weight:400;padding:20px 25px;margin:0 15px;box-shadow:0 2px 2px 1px rgba(0,0,0,0.1);transition:all 0.3s}
.tombolripple:hover,.tombolripple:active{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}
.tombolripple.tsatu{background:#e67e22}
.tombolripple.tdua{background:#3498db}
.tombolripple.tsatu:hover,.tombolripple.tsatu:active{background:#f49541}
.tombolripple.tdua:hover,.tombolripple.tdua:active{background:#4aaff3}
svg{position:absolute;top:0;left:0;width:100%;height:100%}
circle{fill:rgba(255,255,255,0.07)}
.ripple-effect{position:relative;overflow:hidden;-webkit-transform:translatez(0)}
.teffect{display:block;position:absolute;pointer-events:none;border-radius:50%;transform:scale(0);background:#fff;opacity:0.5}
.teffect.animate{animation:ripple-effect 0.5s linear}
@keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}}
@-webkit-keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}}

Perhatikan kode yang ditandai itu untuk warna silahkan sobat sesuaikan.


Langkah Ke Dua
Silahkan sobat salin kode jQuery dibawah ini lalu letakkan sebelum kode </body>

<script type='text/javascript'>
//<![CDATA[
!function(a){a(".ripple-effect").click(function(b){var c=a(this);0===c.find(".teffect").length&&c.append("<span class='teffect'></span>");var d=c.find(".teffect");if(d.removeClass("animate"),!d.height()&&!d.width()){var e=Math.max(c.outerWidth(),c.outerHeight());d.css({height:e,width:e})}var f=b.pageX-c.offset().left-d.width()/2,g=b.pageY-c.offset().top-d.height()/2;d.css({top:g+"px",left:f+"px"}).addClass("animate")})}(jQuery);
//]]>
</script>

Penggunaan kode jQuery ini untuk fungsi Efek Ripple yang ada pada tombol. Setelah itu silahkan di SAVE.


Langkah Ke Tiga
Silahkan sobat salin kode HTML ini di dalam postingan pada metode HTML, kode ini berfungsi sebagai pemanggilnya agar tombol berfungsi. 

<div id="wrap">
  <a class="tombolripple tsatu ripple-effect" href="#" rel="nofollow" target="_blank">Demo</a>
  <a class="tombolripple tdua ripple-effect" href="#" rel="nofollow" target="_blank">Download</a>
</div>

Perhatikan kode yang ditandai silahkan sobat rubah URL yang akan dituju untuk Download atau Demo.

RESULT

Demo

Dan Selesai lihat hasilnya, selamat mencoba.