Membuat Tombol Demo Dan Download Material Design
Membuat Tombol Demo dan Download Material Design - Seperti yang kita ketahui, sekarang 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 alasannya yaitu mempunyai segudang fitur yang bermanfaat serta tampilan yang lebih menarik.
Pada kesempatan ini akan memperlihatkan pola tombol demo dan download yang ditambahkan dengan dampak animasi ripple (gelombang) pada ketika kita menekan tombol tersebut yang merupakan salah satu fitur ibarat dampak animasi dari Material Design.
Pertama Buka Blogger > Klik tombol Edit HTML > Template Editor > Tambahkan CSS di bawah ini sebelum instruksi ]]></b:skin> atau </style>
Kemudian tambahkan instruksi jQuery ini sebelum instruksi </body>
lalu simpan template.
Sekarang untuk instruksi pemanggilnya, tambahkan instruksi HTML di bawah ini di dalam postingan pada tab HTML (bukan compose)
Selesai! Dan lihat hasilnya
Bukan hanya pada tombol, dampak ripple diatas dapat teman tambahkan pada tag apapun di bab markup template lain. Sobat hanya perlu menambahkan ripple-effect di dalam class dalam suatu tag ibarat pola di bawah ini
Sobat hanya perlu memperlihatkan tag CSS overflow:hidden dan position:relative pada tag pembungkusnya
Demikian tutorial wacana cara Membuat Tombol Demo dan Download Material Design. Semoga bermanfaat.
Pada kesempatan ini akan memperlihatkan pola tombol demo dan download yang ditambahkan dengan dampak animasi ripple (gelombang) pada ketika kita menekan tombol tersebut yang merupakan salah satu fitur ibarat dampak 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 instruksi ]]></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)}}Untuk warna tombol dan fungsi lainnya dapat teman sesuaikan kembali
Kemudian tambahkan instruksi jQuery ini sebelum instruksi </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 dampak Ripple pada tombol
lalu simpan template.
Sekarang untuk instruksi pemanggilnya, tambahkan instruksi 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 instruksi yang ditandai
Selesai! Dan lihat hasilnya
Bukan hanya pada tombol, dampak ripple diatas dapat teman tambahkan pada tag apapun di bab markup template lain. Sobat hanya perlu menambahkan ripple-effect di dalam class dalam suatu tag ibarat pola di bawah ini
Sobat hanya perlu memperlihatkan 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 wacana cara Membuat Tombol Demo dan Download Material Design. Semoga bermanfaat.