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.
.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);
}
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("abbr.timeago").timeago()})
var intval = null;
var pos = 0;
$(document).ready(function() {
intval = window.setInterval(moveBg, 70);
});
function moveBg() {
pos++;
$('.buttonz').css({backgroundPosition: (pos * 1) + '% 1px'});
}</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 berganti -ganti warna. Jika masih bingung silakan berkomentar.
My FB : Anonymous Hacker
Sampai jumpa kembali
Terima Kasih telah mengunjungi Blog saya !!!
0 komentar:
Posting Komentar