CARA MEMBUAT TOMBOL DEMO DAN DONLOAD KEREN

Pada kesempatan kali ini saya ingin membagikan  cara Membuat Tombol Demo dan Tombol Donload Keren.
seperti yang Kita Ketahui bahwa sebuah situs atau website Tombol Demo dan Tombol Donload sudah menjadi tren baik itu Pengguna , Pengembang Website , ataupun destob sangat banyak memakai fitur ini guna mempermudah Pengunjung dan penampilanya pun yang menarik semakin mempercantik Website .



Contoh Tombol Demo dan Donload yg di tambahkan animasi ripple ( Gelombang ),
Pada sa'at Kita menekan Tombol tersebut yang merupakan salah satu efek Animasi dari Material design.

① Buka Bloger > Klik Edit HTML > Template Editor >
Tambahkan css di bawah ini sebelum kode ]]></b:skin> Atau </style>

/* Irinmedia Material Button */ #wrap{margin:20px auto;text-align:center} #wrap a{text-decoration:none} .tombolripple{cursor:pointer!important;overflow:hidden;text-decoration:none;display:inline-block;-webkit-appearance:none;font-size:1.7em;border-radius:4px;color:rgba(255,255,255,0.8);font-weight:400;padding:20px 25px;margin:0 15px;box-shadow:0 2px 2px 1px rgba(0,0,0,0.1);transition:all 0.3s} .tombolripple:hover,.tombolripple:active{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)} .tombolripple.tsatu{background:#e67e22} .tombolripple.tdua{background:#3498db} .tombolripple.tsatu:hover,.tombolripple.tsatu:active{background:#f49541} .tombolripple.tdua:hover,.tombolripple.tdua:active{background:#4aaff3} svg{position:absolute;top:0;left:0;width:100%;height:100%} circle{fill:rgba(255,255,255,0.07)} .ripple-effect{position:relative;overflow:hidden;-webkit-transform:translatez(0)} .teffect{display:block;position:absolute;pointer-events:none;border-radius:50%;transform:scale(0);background:#fff;opacity:0.5} .teffect.animate{animation:ripple-effect 0.5s linear} @keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}} @-webkit-keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}}

Keterangan ;
Untuk Warna Tombol & Fungsi Tombol bisa Sobat Sesuaikan Kembali.

② kemudian tambahkan jQuery ini Sblm Kode </body>

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

Keterangan :
Kode jQuery berfungsi untuk memunculkan efek Ripple pada tombol.

③ Kemudian Simpan Template.

④ Untuk Kode Pemanggilnya , tambahkan kode HTML di bawah ini di dlm Postingan pada HTML ( Bukan Compose ).

<div id="wrap">   <a class="tombolripple tsatu ripple-effect" href="#" rel="nofollow" target="_blank">Demo</a>   <a class="tombolripple tdua ripple-effect" href="#" rel="nofollow" target="_blank">Download</a> </div>

Keterangan :
Tambahkan link tujuan pada kode yang berwarna merah.

Selesai kemudian silahkan Lihat hasilnya.

Selamat Mencoba, Semoga artikel ini bermanfa'at.

Share Share Tweet Share Share Share

KLIK

DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain https://irinmedia.blogspot.com/. Terima kasih.