Tombol Button banyak sekali digunakan pada website-website, Biasanya banyak ditemukan pada form pendaftaran, form komentar, dan masih banyak lagi. Contohnya jika anda membuka Facebook ataupun Twitter, anda pasti menemukan beberapa button pada website jejaring sosial tersebut. Mungkin beberapa website masih menggunakan button standar. Jika anda ingin mempercantik website yang anda kelola, anda bisa menambahkan jquery pada button anda. Dengan menambahkan jquery tersebut, tombol button pada website anda menjadi jauh lebih menarik dibandingkan sebelumnya.
Jika anda ingin mencoba dan melihat perbandingannya
dari button tanpa jquery dengan button yang menggunakan jquery,
anda bisa mengikuti langkah2 yang saya berikan untuk membuatnya.
Pertama buatlah tampilan standar untuk menampilkan button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Membuat Button - Blog Tutorial</title>
</head>
<body bgcolor="black"><center>
<font color="white" size="5">Membuat Button Menggunakan JQuery</font>
<div class="demo">
<button>BLOG TUTORIAL</button>
<input type="submit" value="A submit button"/>
<a href="#">PENDAFTARAN ONLINE</a>
</div>
<div class="demo-description">
<p><font color="white">Blog Tutorial: algoritma-cyber.blogspot.com</font></p>
</div>
</body>
</html>
Jika anda jalankan program tersebut,
akan tampil output seperti gambar dibawah ini:
Untuk mengubah tampilan tersebut menjadi lebih menarik
anda membutuhkan 4 buah jquery, yaitu:
Jquery-1.6.2.js
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.button.js
dan bberapa kode css.
Anda tidak perlu mengetik panjang kode css tersebut,
karena anda bisa download dilink dibawah ini:
link ini sudah beserta jquery yang kita butuhkan
sekarang tambahkan skrip berikut untuk memanggil css yang baru saja didownload,
letakan tepat dibawah kode </tittle>
<link rel="stylesheet" href="base/jquery.ui.all.css">
<link rel="stylesheet" href="demos.css">
selanjutnya tambahkan skrip berikut untuk memanggil jquery yang baru saja didownload,
letakkan tepat dibawah kode css tersebut
<script src="jquery-1.6.2.js"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.button.js"></script>
<script>
$(function() {
$( "input:submit, a, button", ".demo" ).button();
$( "a", ".demo" ).click(function() { return false; });
});
</script>
sekarang simpan program anda,
dan coba anda jalankan lagi.
jika berhasil akan keluar output seperti gambar dibawah ini:
lihatlah perbedaanya.
sekarang button anda menjadi jauh lebih menarik.
saat anda klik button tersebut, akan keluar animasi perubahan warna.
bahkan anda bisa mengubah link menjadi button.
Posting Komentar
Semua Artikel Diblog ini boleh disebarluaskan,
asal mencantumkan sumbernya.
Terima kasih atas kunjungannya
Semoga artikel dblog ini bisa bermanfaat buat kita semua.
mohon kritik dan sarannya.
salam kenal dan salam Blogger Indonesia