Tutorial Membuat Tombol Demo dan Download Sederhana - ACREZY

Pada blog yang membahas tutorial dengan menampilkan tombol demo seperti Acrezy Blog.

Mempercantik tampilan tombol demo dan download itu penting karena agar terlihat menarik.

Di kesempatan kali ini saya akan membagikan Tutorial Membuat Tombol Demo dan Download Simple bergaya Material Design.

Yah Material Design mungkin agak mirip dengan Flat.

Oke, langsung saja berikut ini tutorialnya

Tutorial Membuat Tombol Demo dan Download Simple Material Design

---

Masuk ke halaman Blogger

Ke bagian Template lalu Edit HTML

Letakan kode CSS berikut ini sebelum ]]></b:skin> atau </style>

/* CSS TOMBOL DEMO DOWNLOAD - ACREZYBLOG */
.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 jangan lupa untuk klik Simpan

Setelah itu letakan script berikut ini sebelum atau diatas 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 jangan lupa Simpan

Silahkan gunakan kode HTML berikut ini untuk menampilkan tombol

Ganti warna sesuai dengan yang ada di kode warna pada CSS

<div class="btn-space">
      <a class='ripple red' href="#">Demo</a>
      <a class='ripple blue' href="#">Download</a>
</div>

Untuk demo dari Tombol diatas bisa di lihat dengan klik tombol berikut ini

Result

Sekian Tutorial Membuat Tombol Demo dan Download Simple, semoga bermanfaat dan apabila ada kesalahan silahkan komen dibawah.