[Material Design] Custom Button Ripple Effect Dengan CSS dan Javascript

Senin, 30 Januari 2017

Assalamualikum

Salam saja bagi yang non-muslim, Kali ini saya akan membahas tentang :

[Material Design] Custom Button Ripple Effect Dengan CSS dan Javascript

    1 komentar


Material Design Button Ripple Effect

Contoh yang sudah jadi (klick button untuk lihat effect)
Button Button Button Button Button Button Button Button Button Button


Baiklah akan saya tunjukan bagaimana cara membuat Custom Button seperti Demo di atas, jangan hanya Copy Paste saja loh, kalian juga harus memahami sebisa kalian. Karna disini saya hanya menuliskan kode HTML, CSS dan Javascript nya.

HTML :

  1. Buat folder baru, nama foldernya bebas terserah anda, yang penting buat folder baru dan buka Sublime Text Editor (Terserah anda menggunakan text editor apa saja, disini saya menggunakan Sublime Text).
  2. Setelah buka Text Editornya, Copy HTML di bawah ini, dan Paste ke Text Editor anda
  3. Kemudian Save atau Simpan ke folder yang baru saja kalian buat tadi, dan berinama file nya "index.html".
  4. Lanjut simak bagian CSS dibawah...

<!DOCTYPE html>
<html >
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="description" content="Material Design Button Ripple Effect Snippet">
    <title>Material Design Button Ripple Effect</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div class="header">
      <h1 class="title">Material Design Button Ripple Effect</h1>
    </div>
    <div class="container btn-space">
      <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>
    </div>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="js/index.js"></script>
  </body>
</html>


CSS :

  1. Buat folder baru lagi, nama foldernya harus "css" tanpa tanda petik, dan masuk ke text editor lagi.
  2. Setelah buka Text Editornya, Copy CSS di bawah ini, dan Paste ke Text Editor anda
  3. Kemudian Save atau Simpan ke folder bernama "css" yang baru saja kalian buat tadi dan berinama file nya "style.css".
  4. Lanjut simak bagian Javascript dibawah...

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}
.header {
  background-color: #2196F3;padding:55px 0px;text-align:center;margin-bottom: 10px;
}
.header > .title {
  line-height: 48px;
    font-size: 48px;color: #FFF;margin-top: 0px;margin-bottom: 0px;
}
@media only screen and (min-width: 993px) {
    .container {
        width: 85%;
    }
}
@media only screen and (min-width: 993px) {
    .container {
        width: 70%;
    }
}
@media only screen and (min-width: 601px) {
    .container {
        width: 85%;
    }
}
.container {
    margin: 0 auto;
    max-width: 1280px;
    width: 90%;
}
.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;
}


Javascript :

  1. Buat folder baru, nama foldernya harus "js" tanpa tanda petik, dan lagi-lagi kalian masuk text editor.
  2. Setelah buka Text Editornya, Copy Javascript di bawah ini, dan Paste ke Text Editor anda
  3. Kemudian Save atau Simpan ke folder "js" yang baru saja kalian buat tadi, dan beri nama file nya "index.js".
  4. Selesai, anda tinggal buka file "index.html" dengan browser anda.

$(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");
    });
});

Terima Kasih telah berkunjung kesini, jangan bosan kesini ya, jika saya tidak punya apa yang anda cari, anda bisa request ke saya melalui chat facebook disini

Selamat Mencoba & Semoga Bermanfaat

Jika menurut kalian ini bermanfaat bagi teman kalian, bagikan dengan klick pilihan membagikan dibawah ini.
Wassalamualaikum Warahmatullahi Wabarakatuh

1 komentar :

Langganan: Posting Komentar ( Atom )