Cara Membuat Tombol Demo dan Download Material Design

Material design merupakan gaya desain terbaru dari Google yang memiliki prinsip desain seperti kertas pada kenyataanya. Jadi harus mempunyai efek kalau di sentuh, kedalaman layer dan punya bayangan.

Nah, pada kesempatan ini saya akan memberikan contoh membuat tombol demo dan download dengan implementasi dari material desain dengan effect ripple.

Baca juga : Cara Membuat Tombol Demo dan Download Flat UI

Membuat Tombol Demo dan Download Material Design

Masuk Halaman Blogger > Template > klik Edit HTML lalu letakan kode CSS berikut sebelum kode ]]></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}

Jika sudah, letakan kode jQuery berikut di atas kode </body>

<script type='text/javascript'>

//<![CDATA[

$(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>

Kemudian simpan template

Untuk penggunaanya, tambahkan kode HTML berikut di postingan pada mode HTML

<div class="btn-space">

<a class='ripple red' href="#">Demo</a>

<a class='ripple blue' href="#">Download</a>

</div>

Demo Download

Untuk pilihan warna yang lain, bisa disesuaikan dengan kode warna yang ada di CSS.

Sekian dulu sobat artikelnya, bila ada saran & kritik silahkan masukan komentar dan semoga bermanfaat.