Cara Membuat Tombol Berganti - ganti Warna


Sesuai topik diatas pada kesempatan kali ini admin akan share cara membuat tombol berganti - ganti warna. Selain untuk mempercantik tampilan blog, tampilan tombol yang berganti - ganti warna menjadi daya tarik tersendiri bagi para pengunjung blog untuk mengklik tombol tersebut. Tapi nggak ada jaminan juga sih, hehe
Tombol ganti - ganti warna bisa agan gunakan semisal untuk membuat tombol Join This Site, tombol untuk link downoad dan masih banyak kegunaaannya. Untuk Demonya agan bisa lihat tombol Join this site yang ada di bagian navigasi web ini atau lihat dibawah ini. Sangat menarik bukan ? hehe.
Cara Membuat Tombol Berganti - ganti Warna


Jika agan pengen membuat tombol seperti itu agan cukup menambahkan CSS berikut di atas ]]></b:skin> atau di bawah <style>
.buttonz{
display:inline-flex;
border-radius:4px;
cursor:pointer;
font-size:13px;
font-weight:bold;
text-transform:uppercase;
color:#FFF!important;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhsxzzJ8VQ2L1Gl_RFqscGp2kMSy3i0n0g1DITjzr7mL08D9UsXDlwNDWD3un90gbiDgKQHvAAqe5wypOAOz11SY9oqrGnl56d5KJG3VRwyddxc2tTrECtqDNbGLRXQfWZ4Y-AOQOeyVm0/s1600/rainbow.png);
background-size:cover;
padding:8px 25px;
text-shadow:none;
transition:all 1s;
}
.buttonz:hover, .buttonz:hover, .buttonz.link:hover {
box-shadow: 0px 0px 18px 18px rgba(80, 80, 80, 0);
}

Kemudian Jangan lupa tambahkan script berikut agar warnanya berjalan.
<script src='http://yourjavascript.com/1583214855/blanter-timeago.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(e){e(&quot;abbr.timeago&quot;).timeago()})
var intval = null;
var pos = 0;
$(document).ready(function() {
intval = window.setInterval(moveBg, 70);
});
function moveBg() {
pos++;
$(&#39;.buttonz&#39;).css({backgroundPosition: (pos * 1) + &#39;% 1px&#39;});
}</script>

Untuk penerapan tombolnya Sebagai berikut :
<a class="buttonz" href="LINK-Kamu">DOWNLOAD</a>
Ganti LINK-Kamu dengan link yang akan dituju dan DOWNLOAD bisa agan ganti dengan nama Link tombol agan.
Tombol ini bisa agan ,modfikasi sesuai selera agan. Sekian tutorial cara membuat tombol bergani -ganti warna. Jika masih bingung silakan berkomentar.

Share this:

Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Show Parser Box

Disqus CommentsLoadHide