Membuat Tombol Demo dan Unduh Di Dalam Postingan Blog

Sekarang ini perkembangan dalam dunia design Website sangat pesat dan mudah untuk di pelajari, aneka macam 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 mengagumkan 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 yaitu tombol Demo dan Tombol Unduh yang tujuannya memudahkan pengunjung untuk mencoba dan melihat hasil karya dari si Pengembang Template tersebut kalau 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 Unduh Di Dalam Postingan Blog, bagi sahabat yang mau mencobanya mari kita bahas bersama.

Langkah Pertama

Silahkan sahabat salin aba-aba CSS dibawah ini lalu letakkan sebelum aba-aba ]]></b:skin> atau </style>

/*  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 aba-aba yang ditandai itu untuk warna silahkan sahabat sesuaikan.


Langkah Ke Dua
Silahkan sahabat salin aba-aba jQuery dibawah ini lalu letakkan sebelum aba-aba </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 aba-aba jQuery ini untuk fungsi Efek Ripple yang ada pada tombol. Setelah itu silahkan di SAVE.


Langkah Ke Tiga
Silahkan sahabat salin aba-aba HTML ini di dalam postingan pada metode HTML, aba-aba ini berfungsi sebagai pemanggilnya semoga 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 aba-aba yang ditandai silahkan sahabat rubah URL yang akan dituju untuk Unduh atau Demo.

RESULT

Demo

Dan Selesai lihat hasilnya, selamat mencoba.