Cara Membuat Efek Animasi Ripple Tombol Material Design di Blogger

Seperti yang sudah kita ketahui sekarang bahwasanya Material Design telah menjadi tren untuk Interface Website atau bisa dibilang UI (User Interface). Style Material Design sangat cantik jika dilihat di perangkat Mobile maupun Desktop. Material Design adalah salah satu Style yang digunakan oleh Google. Jadi, sangat wajar jika banyak orang yang menyukainya.

Pada artikel ini, saya akan membagikan tutorial untuk membuat Animasi Ripple ciri khas Material Design Google spesial untuk pengguna Blogger. Tetapi, kalian juga bisa menerapkannya pada halaman HTML yang sedang kalian buat.

Berikut adalah contoh tampilannya beserta Link demonya:

Cara Memasang Tombol Material Design dengan Animasi Ripple di Blogger

Langkah pertama, masuk ke akun Blogger, pilih Theme (Tema) > Edit HTML.
Kedua, cari kode ]]></b:skin> atau </style> kemudian salin dan pastekan kode CSS berikut tepat diatas/di dalamnya:

Versi Beautified (Belum di Compress)

.elcreative-md-button-ripple {
    background-color: #1a73e8;
    color: #ffffff;
    border: none;
    border-radius: .25rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 2.25rem;
    min-width: 5.5rem;
    outline: 0;
    padding: 7px 15px;
    position: relative;
    -webkit-transition: background .4s cubic-bezier(.25,.8,.25,1);
    -o-transition: background .4s cubic-bezier(.25,.8,.25,1);
    transition: background .4s cubic-bezier(.25,.8,.25,1);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-decoration: none;
}

.elcreative-md-button-ripple:hover {
    background-color: #125bbb;
    color: #ffffff;
}

.elcreative-md-button-ripple:active {
    -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 2px 6px 2px rgba(60, 64, 67, .15);
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 2px 6px 2px rgba(60, 64, 67, .15);
}

.elcreative-ripple-effect {
    position:relative;
    overflow:hidden;
    -webkit-transform:translatez(0)
}

.elc-ripple-effect {
    display:block;
    position:absolute;
    pointer-events:none;
    border-radius:50%;
    -webkit-transform:scale(0);
    -ms-transform:scale(0);
    transform:scale(0);
    background:#fff;
    opacity:0.4
}

.elc-ripple-effect.animate {
    -webkit-animation:elcreative-ripple-effect 0.4s linear;
    animation:elcreative-ripple-effect 0.4s linear
}

@keyframes elcreative-ripple-effect{
    100%{
        opacity:0;
        -webkit-transform:scale(2.4);
        transform:scale(2.4)
    }
}

@-webkit-keyframes elcreative-ripple-effect{
    100%{
        opacity:0;
        -webkit-transform:scale(2.4);
        transform:scale(2.4)
    }
}

Versi Minified (Sudah di Compress)

.elcreative-md-button-ripple{background-color:#1a73e8;color:#fff;border:none;border-radius:.25rem;-webkit-box-sizing:border-box;box-sizing:border-box;min-height:2.25rem;min-width:5.5rem;outline:0;padding:7px 15px;position:relative;-webkit-transition:background .4s cubic-bezier(.25,.8,.25,1);-o-transition:background .4s cubic-bezier(.25,.8,.25,1);transition:background .4s cubic-bezier(.25,.8,.25,1);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;text-align:center;white-space:nowrap;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-decoration:none}.elcreative-md-button-ripple:hover{background-color:#125bbb;color:#fff}.elcreative-md-button-ripple:active{-webkit-box-shadow:0 1px 2px 0 rgba(60,64,67,.30),0 2px 6px 2px rgba(60,64,67,.15);box-shadow:0 1px 2px 0 rgba(60,64,67,.30),0 2px 6px 2px rgba(60,64,67,.15)}.elcreative-ripple-effect{position:relative;overflow:hidden;-webkit-transform:translatez(0)}.elc-ripple-effect{display:block;position:absolute;pointer-events:none;border-radius:50%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);background:#fff;opacity:.4}.elc-ripple-effect.animate{-webkit-animation:elcreative-ripple-effect 0.4s linear;animation:elcreative-ripple-effect 0.4s linear}@keyframes elcreative-ripple-effect{100%{opacity:0;-webkit-transform:scale(2.4);transform:scale(2.4)}}@-webkit-keyframes elcreative-ripple-effect{100%{opacity:0;-webkit-transform:scale(2.4);transform:scale(2.4)}}

Ketiga, cari kode </body> dan pastekan Script berikut tepat diatasnya:

Versi Beautified (Belum di Compress)

<script type="text/javascript">
    //<[CDATA[
    !function(e) {
        e(".elcreative-ripple-effect").click(function(c) {
            var a = e(this);
            0 === a.find(".elc-ripple-effect").length && a.append("<span class='elc-ripple-effect'></span>");
            var b = a.find(".elc-ripple-effect");
            if (b.removeClass("animate"), !b.height() && !b.width()) {
                var d = Math.max(a.outerWidth(), a.outerHeight());
                b.css({height:d, width:d});
            }
            d = c.pageX - a.offset().left - b.width() / 2;
            c = c.pageY - a.offset().top - b.height() / 2;
            b.css({top:c + "px", left:d + "px"}).addClass("animate");
        });
    }(jQuery);
    //]]>
</script>

Versi Minified (Sudah di Compress)

<script type="text/javascript">
//<[CDATA[
!function(e){e(".elcreative-ripple-effect").click(function(c){var a=e(this);0===a.find(".elc-ripple-effect").length&&a.append("<span class='elc-ripple-effect'></span>");var b=a.find(".elc-ripple-effect");if(b.removeClass("animate"),!b.height()&&!b.width()){var d=Math.max(a.outerWidth(),a.outerHeight());b.css({height:d,width:d})}
d=c.pageX-a.offset().left-b.width()/2;c=c.pageY-a.offset().top-b.height()/2;b.css({top:c+"px",left:d+"px"}).addClass("animate")})}(jQuery);
//]]>
</script>

Catatan: Sebelum memasangnya, pastikan Template Blogger yang kalian gunakan telah terpasang jQuery.

Terakhir, simpan Template dengan menekan tombol Save (Simpan).

Cara Membuat Tombol Material Design di Postingan Blogger

Untuk membuatnya di dalam postingan, salin dan pastekan kode HTML berikut dimanapun yang kalian mau:

<a class="elcreative-md-button-ripple elcreative-ripple-effect" href="#">NAMA TOMBOL</a>

Catatan: Dalam memasang kode diatas, pastikan kalian telah masuk kedalam mode HTML, bukan Compose.

Terakhir, atur nama tombol dan link "#" dengan nama serta URL yang telah kalian tentukan.
Selesai.

Mudah bukan? Itulah sedikit tutorial yang bisa saya bagikan kali ini, semoga artikel ini bermanfaat dan terimakasih telah berkunjung di EL Creative Academy.