23 March 2015

Membuat Button Unik Yang Berubah-ubah Warna

Button Berubah-ubah Warna

Membuat Button Warna-warni di blog - Pada Tutorial kali ini saya hanya bisa memberikan simple button yang dapat berubah-ubah warna dengan sendirinya, Button ini unik karena tidak pada umumnya, button biasanya tidak memakai script, tapi button kali ini memakai script supaya warna dapat berubah-ubah dengan sendirinya.

Agar anda tidak bingung seperti apa button tersebut, anda bisa lihat button di bawah ini.


Nah untuk pemasanganya cukup mudah anda hanya harus menambahkan sedikit CSS, sedikit HTML, dan sedikit Javascript.

HTML, silahkan anda letakan di tempat yang anda inginkan.

 <a class='buttonz' href='#link-disini' target='_blank'>Nama Button</a> 

HTML tidak akan sempurna tanpa CSS. Untuk menambahkan CSS silahkan anda letakan CSS dibawah ini tepat diatas ]]></b:skin> atau </style>

 /* BUTTON PELANGI */
.buttonz{
display:inline-flex;
border-radius:4px;
cursor:pointer;
font-size:13px;
font-weight:bold;
text-transform:uppercase;
color:#FFF!important;
background:url(http://1.bp.blogspot.com/-8ajTcOaRwVU/VJ_Z9jExy2I/AAAAAAAAAwg/b-ae25VRCHM/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);
} 

Dan yang terakhir adalah Javascript, Fungsi javascript ini agar background yang sudah di Set di CSS dapat bekerja dan membuat warna button tersebut berubah-ubah. Silahkan anda letakan diatas </head> atau </body>

 <script type='text/javascript'>
var intval = null;
var pos = 0;
$(document).ready(function() {
intval = window.setInterval(moveBg, 70);
});
function moveBg() {
pos++; 
$('.buttonz').css({backgroundPosition: (pos * 1) + '% 1px'});
}
  </script> 

Dan jika anda yang ingin me ReDesign template tapi tidak bisa atau tidak sempat, anda bisa menggunakan jasa admin blog ini, "Jasa ReDesign Template Blogger"
Harga murah meriah.

Dan jika anda ingin membeli produk Indonesia atau membaca artikel tentang Indonesia anda bisa langsung kelink di bawah ini.
Semoga Tutorial ini Bermanfaat...
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • 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.
Konversi Code
Out Of Topic