Cara Membuat Button Material Design Dengan Ripple Effect di Blogger

Ripple effect lagi bagus-bagusnya sekarang, karena identik dengan material design. Sekarang blogger sudah semakin maju dengan tampilan yang lebih minimalis dengan tema material design.

Kali ini saya mau berbagi Cara Membuat Button Material Design Dengan Ripple Effect di Blogger. Button dengan Ripple Effect ini sangat keren untuk di gabungkan dengan template material design yang kamu gunakan.

Jika kamu ingin melihat demo button nya silahkan cek demo dibawah ini.

Demo
Nah jika kamu ingin memasangnya di blognya, silahkan ikuti langkah-langkah pemasangan dibawah.

Cara Membuat Button Material Design Dengan Ripple Effect di Blogger
Langkah pertama, Login terlebih dahulu ke blogger sobat
Langkah kedua, Masuk ke menu Tema dan Edit HTML
Langkah ketiga, Salin kode dibawah dan tempatkan kode tersebut tepat diatas ]]></b:skin> atau <style>

.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;}

Langkah keempat, Masukkan Javascript berikut 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>

Langkah terakhir tinggal masukkan HTML button di bawah untuk diletakkan di postingan, tapi kamu harus dalam mode HTML dahulu sebelum memasukkan button tersebut.

<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.

Nah bagus bukan button tersebut? Jika kamu ingin bertanya sesuatu atau kesulitan saya persilahkan untuk kamu berkomentar.

Jika kamu belum memasang JQurey, silahkan pasang dulu di blogger sobat.

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

Sekian tutorial untuk Membuat Button Material Design Dengan Ripple Effect di Blogger, semoga tutorial ini bermanfaat untuk kalian.