Membuat Button Unik Yang Berubah-ubah Warna
23 March 2015
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7FouWLrX1nV22y2i58yTHP-vD5kQn-Xm9o3isGPOrZn3yDjmLT5NF3O9c7lu2FRlIdyR4qXfGx6oNcm5L5UXvpEXu9C9YHE-67ovnSXxb0125g_ANw02MlJwEElel9pmvTkP5zOmB9yJP/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.
Harga murah meriah.
Dan jika anda ingin membeli produk Indonesia atau membaca artikel tentang Indonesia anda bisa langsung kelink di bawah ini.
- www.beeindo.com - Toko Online.
- blog.beeindo.com - Artikel Indonesia.
Semoga Tutorial ini Bermanfaat...