Membuat Material Design Button Ripple Effect Di Blogger

Cara Membuat Button Material Design

android material button ripple effect Cara menciptakan tombol button download atau demo dengan efect click ripple pada butonnya.

Hallo sobat, pada postingan kali ini aku akan membuatkan button dengan animasi ripple saat di klik, akan ada animasi menyerupai air yang di sentuh. Kira-kira menyerupai itu lah.

Untuk kalian yang ingin melihat menyerupai apa tampilan dari button material design ini, silahkan kunjungi link berikut ini.

Result

Nah bila kalian ingin memasangnya, silahkan ikuti tutorial singkat berikut ini....

• Login ke Blogger.com

• Masuk ke Tab Template-> Klik Edit HTML, Cari Code ]]></b:skin> atau </style> 

• kalo sudah ketemu, masukan CSS di bawah ini sempurna di atas instruksi yang tadi di cari

 .btn-space{text-align: center;} .ripple {text-align: center;display: inline-block;padding: 8px 30px;border-radius: 2px;letter-spacing: .5px;border-radius: 2px;text-decoration: none;color: #fff;overflow: hidden;position: relative;z-index: 0;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;} .ripple:hover {box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);} .ink {display: block;position: absolute;background: rgba(255, 255, 255, 0.4);border-radius: 100%;-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);transform: scale(0);} .animate {-webkit-animation: ripple 0.55s linear;-moz-animation: ripple 0.55s linear;-ms-animation: ripple 0.55s linear;-o-animation: ripple 0.55s linear;animation: ripple 0.55s linear;} @-webkit-keyframes ripple {100% {opacity: 0;-webkit-transform: scale(2.5);}} @-moz-keyframes ripple {100% {opacity: 0;-moz-transform: scale(2.5);}} @-o-keyframes ripple {100% {opacity: 0;-o-transform: scale(2.5);}} @keyframes ripple {100% {opacity: 0;transform: scale(2.5);}} .red {background-color: #F44336;} .pink {background-color: #E91E63;} .blue {background-color: #2196F3;} .cyan {background-color: #00bcd4;} .teal {background-color: #009688;} .yellow {background-color: #FFEB3B;color: #000;} .orange {background-color: #FF9800;} .brown {background-color: #795548;} .grey {background-color: #9E9E9E;} .black {background-color: #000000;} 

• Sekarang Masukan Javascript Dibawah Ini Tepat Diatas Kode </BODY>

 <script type='text/javascript'> $(function() {     var ink, d, x, y;     $(".ripple").click(function(e) {         if ($(this).find(".ink").length === 0) {             $(this).prepend("<span class='ink'></span>");         }         ink = $(this).find(".ink");         ink.removeClass("animate");         if (!ink.height() && !ink.width()) {             d = Math.max($(this).outerWidth(), $(this).outerHeight());             ink.css({                 height: d,                 width: d             });         }         x = e.pageX - $(this).offset().left - ink.width() / 2;         y = e.pageY - $(this).offset().top - ink.height() / 2;         ink.css({             top: y + 'px',             left: x + 'px'         }).addClass("animate");     }); }); </script> 

Button Material Design ini memerlukan ajaq, kalo di template sahabat belum terpasang / efek butonnya ga berfungki.
Masukan script ajaq jquery berikut di atas </head>

 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 

• Sekarang, save template.

Memasang Button Material Design Ke Postingan

• Keluar dari Edit Html, masuk ke postingan.

• Lalu pilih tab HTML, rujukan lihat gambar

• saat kalian ingin menambahkan tombol button, sepert link keluar tambahkan class="ripple red" di dalam instruksi link .red sesuaikan dengan warna yang kalian mau..

• Contoh :

   <a class="ripple red" href="Link Disini">Demo</a> 

• Ini instruksi html untuk warna background yang sudah ada. Silahkan dipilih sesuka hati.

       <a class="ripple red" href="#">Button</a>       <a class="ripple pink" href="#">Button</a>       <a class="ripple blue" href="#">Button</a>       <a class="ripple cyan" href="#">Button</a>       <a class="ripple teal" href="#">Button</a>       <a class="ripple yellow" href="#">Button</a>       <a class="ripple orange" href="#">Button</a>       <a class="ripple brown" href="#">Button</a>       <a class="ripple grey" href="#">Button</a>       <a class="ripple black" href="#">Button</a> 

• Selesai, save dan publikasikan. Oye

Cukup sekian dan terimakasih, supaya artikel perihal cara Membuat Material Design Button Ripple Effect Di Bloggerini bermanfaat.

Jangan lupa tinggalkan jejak anda di kolom komentar untuk mempermudah admin mengunjungi balik blog kalian :)