Membuat Tombol Demo dan Download Material Design

Dewasa ini penggunaan material design sebagai antar muka/interface website sudah menjadi tren bagi kalangan para webmaster. Tidak terkecuali untuk para blogger. Material Design juga  akan membuat tampilan suatu website terlihat lebih modern. Buat kamu blogger dengan niche download pasti membutuhkan yang namanya tombol download untuk mempermudah visitor dalam melakukan kegiatan unduh. Atau kamu blogger dengan niche download template pasti membutuhkan yang namanya Tombol Demo untuk meyakinkan visitor. Untuk itu kali ini saya akan membagikan tutorial dalam Membuat Tombol Download dan Demo Material Design. Tombol ini juga memiliki fitur ripple/bergelombang ketika di klik. Jadi terlihat lebih premium menurut saya.

Langkah-langkah Membuat Tombol Download dan Demo Material Design

Langkah-langkahnya cukup panjang, jadi usahakan untuk membaca tiap step dengan teliti.

1. Buka dashboard Blogger⇒Template⇒Edit HTML
2. Masukkan kode berikut diatas ]]></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)}}

   Note: Kode yang saya tandai adalah kode warna, kamu bisa menggantinya dengan warna yang lain

3. Kemudia tambahkan kode berikut diatas </body>. Kode ini berfungsi untuk menampilkan efek ripple pada tombol

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

4. Kemudian save template

Nah, untuk memunculkan tombol tersebut kita hanya perlu menambahkan kode berikut pada postingan kita melalui mode HTML bukan mode compose

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

Tanda “#” bisa kamu ganti dengan link tujuan ketika tombol diklik. Berikut adalah hasilnya

See the Pen rmLWwR by Muhammad Royyan (@royyan) on CodePen.

Demikian Cara Membuat Tombol Demo dan Download Material Design. Semoga bermanfaat dan Selamat mencoba.