Material Design Download Button Effect Ripple Di Blog

Material Design Download Button Effect Ripple Di Blog: Baiklah kali ini blog ID Dzgn akan coba membagikan Tutorial untuk Cara Membuat Material Design Download Button Effec Riplle Di Blog, nah kamu pasti sudah tau donk Material Design itu apa?? Material Design adalah sebuah tampilan visual yang di luncurkan google pada tahun 2014, umumnya material design sendiri terdapat pada Android, OS dan masih banyak lainya sampe sekarang material design resmi di aplikasikan di berbagai produk Google.
Banyak Designer-designer web yang sudah mengembangkan material design ini untuk di terapkan pada template blog/web, apalagi saat ini penggemar tampilan material design sudah makin bertambah termasuk saya, oky kembali ke pembahasan kali ini, nah tutorial kali ini saya bagikan karena ada pengunjung blog ini yang merequest tutorial untuk tombol download menggunakan material design.
Jika kamu masih penasaran dengan demo tombol yang akan kita buat kamu bisa lihat demonya lebih lengkap di bawah ini:

Result

Nah Mudah-mudahan tutorial saya kali ini bisa menjawab keinginan anda untuk mengubah sedikit demi-sedikit tampilan blog kamu jadi lebih keren.

Material Design Download Button Effect Ripple

1. Masuk ke Blogger>Tema>Edit Html, lalu pastekan kode CSS berikut tepat sebelum kode ]]></b:skin>, untuk mempercepat pencarian silahkan kamu klik tombol

CTRL

+

F

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 kamu cari kode </body> lalu pastekan kode 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 jika sudah selesai silahkan kamu Simpan/save template.

3. Sekarang buat artickle/post baru silahkan kamu ubah modenya terlebih dahulu, pindah dari mode Compose ke mode HTML lalu pastekan kode html berikut.

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

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

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

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

Artikel Terkait