Cara Membuat Tombol Demo dan Download Material Design

Membuat Tombol Demo dan Download Material Design - Seperti yang kita ketahui, kini Material Design sudah menjadi tren sebagai antarmuka web atau UI (User Interface) baik itu pada perangkat mobile maupun desktop dalam sebuah halaman website. Antarmuka web ini pun disambut baik oleh pengguna maupun pengembang website karena memiliki segudang fitur yang bermanfaat serta tampilan yang lebih menarik.





Pada kesempatan ini Laros akan memberikan contoh tombol demo dan download yang ditambahkan dengan efek animasi ripple (gelombang) pada saat kita menekan tombol tersebut yang merupakan salah satu fitur seperti efek animasi dari Material Design.



Membuat Tombol Demo dan Download Material Design



Pertama Buka Blogger > Klik tombol Edit HTML > Template Editor > Tambahkan CSS di bawah ini sebelum kode ]]></b:skin> atau </style>



/* Laros 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)}}


Untuk warna tombol dan fungsi lainnya bisa sobat sesuaikan kembali


Kemudian tambahkan kode jQuery ini 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>


Kode jQuery berfungsi untuk memunculkan efek Ripple pada tombol


kemudian simpan template.



Sekarang untuk kode pemanggilnya, tambahkan kode HTML di bawah ini di dalam postingan pada tab HTML (bukan 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>


Tambahkan link tujuan pada kode yang ditandai


Selesai! Dan lihat hasilnya


Bukan hanya pada tombol, efek ripple diatas bisa sobat tambahkan pada tag apapun di bagian markup template lain. Sobat hanya perlu menambahkan ripple-effect di dalam class dalam suatu tag seperti contoh di bawah ini


Sobat hanya perlu memberikan tag CSS overflow:hidden dan position:relative pada tag pembungkusnya


#wrapper{position:relative;overflow:hidden}
#wrapper .child{......}


<div id="wrapper">
  <span class="child ripple-effect" >Contoh</span>
</div>


Demikian tutorial tentang cara Membuat Tombol Demo dan Download Material Design. Semoga bermanfaat.




Cara Membuat Tombol Demo dan Download Material Design Cara Membuat Tombol Demo dan Download Material Design Reviewed by Laros on Jumat, Maret 24, 2017 Rating: 5
Rekomendasi Untuk Anda × +
Add Comments

Tidak ada komentar:

Diberdayakan oleh Blogger.