Carah Menciptakan Tombol Demo Dan Download Material Design

Posted on

Seperti yang kau ketahui, ketika ini Material Design sangat di sukai oleh para blogger. Material Design ketika ini sudah menjadi tren di kalangan blogger.
Banyak blogger yang berlomba-lomba menerapkan tampilan blog menyerupai Material Design. kali ini aku ingin memberi sedikit isu ihwal cara menciptakan tombol sajian Download dan Demo Material Design.

Membuat Tombol Demo dan Download Material Design .

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

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

Catatan:
Untuk warna tombol dan fungsi lainnya silakan di rubah sesuai ke inginan.

2. Kemudian tambahkan aba-aba jQuery ini 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>
 

Catatan:
Kode jQuery berfungsi untuk memunculkan pengaruh Ripple pada tombol.
lalu simpan template.

Sekarang untuk aba-aba pemanggilnya, tambahkan aba-aba 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 aba-aba yang ditandai.
Saya rasa hingga di sini sudah cukup gampang untuk di pahami dan di terapkan.

Gambar Gravatar
Waduh gk tau mau ngomong apa bro!