Membuat Tombol Demo dan Download Material Design - Material Design merupakan bahasa desain yang dikembangkan oleh Google dan diumumkan pada acara konferensi Google I/O pada 25 Juni 2014. Kesempatan kali ini, saya akan membagikan tutorial membuat tombol demo dan download yang ditambahkan dengan efek animasi ripple (gelombang) pada saat kursos menekan tombol tersebut yang merupakan salah satu dari efek animasi material design.
Semenjak diumumkannya material design yang diprakarsai oleh perusahaan besar dari negeri paman sam tersebut, material design menjadi sebuah tren baru dalam dunia desain antar muka (user interface) baik untuk halaman web maupun aplikasi mobile. Para desainer maupun pengembang perangkat lunak juga menyambut dengan baik atas berbagai fitur yang ditawarkan serta tampilan yang terlihat lebih simpel dan tetap elegant.
Nah, bagi kalian yang memiliki blog berbagi file baik software maupun film tombol blog merupakan salah satu syarat yang harus anda siapkan untuk memudahkan pengunjung dalam melihat demo serta mendownload file yang kalian bagikan. Melihat dari pentingnya tombol demo dan download pada blog berbagi file, pada kali ini saya akan memberikan tutorial membuat tombol demo dan download material design terlihat lebih simpel namun tetap menarik.
Membuat Tombol Demo dan Download Material Design
1. Masuk dalam akun blog kalian terlebih dahulu
2. Pilih Template > Edit HTML
3. Cari kode ]]></b:skin> atau </style> dengan menggunakan Ctrl+F pada tombol keyboard kalian
4. Tambahkan kode CSS di bawah ini, tepat di atas kode ]]></b:skin> atau </style>
/* Jurnal Blog Material Design 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:#FFD700}
.tombolripple.tdua{background:#008000}
.tombolripple.tsatu:hover,.tombolripple.tsatu:active{background:#FFA500}
.tombolripple.tdua:hover,.tombolripple.tdua:active{background:#6B8E23}
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)}} Silahkan kalian ganti, pada kode yang berwarna kuning, dengan kode warna yang kalian inginkan.
5. Setelah itu, carilah kode </body> dan tambahkan kode jQuery di bawah ini, tepat berada di atas kode </body> tersebut
<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> Fungsi dari kode jQuery tersebut yaitu untuk memunculkan efek Ripple pada tombol saat disentuh oleh kursor
6. Selanjutnya klik pada tombol Simpan Template
Cara Memasang Tombol Demo dan Download pada Postingan
1. Buatlah sebuah postingan baru
2. Kemudian tambahkan kodel HTML di bawah ini pada bagian 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> Ganti pada kode # dengan link tujuan kalian
3. Jika sudah, klik pada tombol Publikasikan dan lihat hasilnya.
Itulah tadi tutorial, cara membuat tombol demo dan download material design yang terlihat simpel dan tetap elegant. Semoga bermanfaat bagi kita semua, sekian dan terimakasih.
EmoticonEmoticon