Material Design Download Button Effect Ripple Di Blog

Material Design Download Button Effect Ripple Di Blog: Baiklah kali ini blog akan coba membagikan Tutorial untuk Cara Membuat Material Design Download Button Effec Riplle Di Blog, nah kau niscaya sudah tau donk Material Design itu apa?? Material Design ialah sebuah tampilan visual yang di luncurkan google pada tahun 2014, umumnya material design sendiri terdapat pada Android, OS dan masih banyak lainya sampe kini material design resmi di aplikasikan di banyak sekali produk Google.
Banyak Designer-designer web yang sudah menyebarkan material design ini untuk di terapkan pada template blog/web, apalagi ketika ini penggemar tampilan material design sudah makin bertambah termasuk saya, oky kembali ke pembahasan kali ini, nah tutorial kali ini aku bagikan alasannya ialah ada pengunjung blog ini yang merequest tutorial untuk tombol download memakai material design.
Jika kau masih ingin tau dengan demo tombol yang akan kita buat kau sanggup lihat demonya lebih lengkap di bawah ini:

Result

Nah Mudah-mudahan tutorial aku kali ini sanggup menjawab harapan anda untuk mengubah sedikit demi-sedikit tampilan blog kau jadi lebih keren.

Material Design Download Button Effect Ripple

1. Masuk ke Blogger>Tema>Edit Html, kemudian pastekan isyarat CSS berikut sempurna sebelum isyarat ]]></b:skin>, untuk mempercepat pencarian silahkan kau klik tombol

CTRL

pada keyboard kamu.

.ripplelink{border:1px solid rgba(0,0,0,0.12)} .btn, .btn-large { text-decoration: none; color: #FFF; background-color:#0092d4 !important; text-align: center; letter-spacing: .5px; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; -o-transition: .2s ease-out; -ms-transition: .2s ease-out; transition: .2s ease-out; cursor: pointer; } .btn:hover, .btn-large:hover { background: #08a7ef !important; }.btn i{margin-left:0} .z-depth-1-half, .btn:hover, .btn-large:hover, .btn-floating:hover { -webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18), 0 4px 15px 0 rgba(0,0,0,0.15); -moz-box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15); box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18), 0 4px 15px 0 rgba(0,0,0,0.15); } .btn, .btn-large, .btn-flat { border: none; border-radius: 5px; display: inline-block; height: 36px; line-height: 36px; outline: 0; padding: 0 2rem; text-transform: uppercase; vertical-align: middle; -webkit-tap-highlight-color: transparent; }

2. Sekarang silahkan kau cari isyarat </body> kemudian pastekan isyarat Javascript ini di atasnya.

<script> $(function(){var t,e,i,n;$(".ripplelink").click(function(o){0===$(this).find(".ink").length&&$(this).prepend("<span class='ink'></span>"),t=$(this).find(".ink"),t.removeClass("animate"),t.height()||t.width()||(e=Math.max($(this).outerWidth(),$(this).outerHeight()),t.css({height:e,width:e})),i=o.pageX-$(this).offset().left-t.width()/2,n=o.pageY-$(this).offset().top-t.height()/2,t.css({top:n+"px",left:i+"px"}).addClass("animate")})});</script>

Nah kalau sudah selesai silahkan kau Simpan/save template.

3. Sekarang buat artickle/post gres silahkan kau ubah modenya terlebih dahulu, pindah dari mode Compose ke mode HTML kemudian pastekan isyarat html berikut.

<div style="text-align: center;"><a class="btn ripplelink" href="Url Tujuan" title="Material Design Download Button Effect Ripple Di Blog"><i class="fa fa-download"></i> Download</a><a class="btn ripplelink" href="Url Tujuan" title="Material Design Download Button Effect Ripple Di Blog">Demo <i class="fa fa-paper-plane-o"></i></a></div>

Silahkan kau ganti Url Tujuan dengan Link tujuan kamu.
Nah untuk penempatan tombol download ini kau sanggup pasang di bab postingan mana saja,
Jika kau termasuk orang kreative kau niscaya sanggup mengedit/mengubah kembali warna atau bentuknya.

Jika sudah terakhir silahkan kau publikasikan/pertinjau untuk melihat hasilnya.

Oky kalau ada penempatan kata yang salah mohon maaf yaa!, jangan lupa Kritik dan Saran kamu, karna kami sangat membutuhkanya untuk lebih menyebarkan lagi pelayanan yang kami berikan.