Website ini sengaja saya buat untuk berbagi ilmu dengan teman-teman semua dan untuk mengingat kembali apa yang telah saya pelajari. Semoga website ini dapat bermanfaat untuk diri saya sendiri maupun teman-teman yang sudah berkunjung ke website saya selamat datang di website HadiKurniawan, bagi anda yang ingin berbagi atau mempublikasikan artikel di website ini, bisa kirimkan melalui fitur submit link yang terletak disudut bawah kanan pada website ini. terimakasih atas kunjungannya
Home » » Membuat Button Menggunakan JQuery

Membuat Button Menggunakan JQuery

Written By Unknown on Jumat, 19 April 2013 | 08.25

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.



Share this article :

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

 
Copyright © 2013. Catatan Hadi - All Rights Reserved
www.hadikurniawan.com