Home Tutorial Ajax Jquery jQuery Button

 
 

Share on Google+Share on Google+
jQuery Button
Posted on: December 3, 2009 at 12:00 AM
Advertisement
A button is a user interface that provides the user a simple way to trigger an event, like searching for a query at a search engine etc.

What is JQuery Button ?

A button is a user interface that provides the user a simple way to trigger an event, like searching for a query at a search engine etc.

Getting Started with jQuery Animated Button:

In jQuery we can make buttons more stylish and user friendly like we can make hover on buttons and make animated buttons etc. There are the following steps we have to follow to make jQuery animated button.

Step 1: In the first step we make css to create the button background, height, width and other things

<style>

div { 

background-color:#45DDD8; 

width:100px; 

border:1px solid red;

}

</style><style>

div { 

background-color:#45DDD8; 

width:100px; 

border:1px solid red;

}

</style>

Step 2: In the second step we make the connection with jquery plugin which is jquery.js .

                             <script src="../plugin/jquery.js" type="text/javascript"></script>

Step 3: In the third step we will make the script part ,the script part required for the button animation , font size, border width etc for the button.

<script>

$(document).ready(function(){

$("#click").click(function(){

$("#animationblock").animate({ 

width: "50%",

opacity: 0.3,

marginLeft: "0.5in",

fontSize: "3em"

borderWidth: "8px"

}, 1500 );

});

});

</script>

Step 4: In the last step we will make the HTML part ,the HTML required on the front end for this button is very simple. Simply add a <button> </button>and inside the <div></div> tag we write the id for animating the button.

<html>

</head>

<body>

<button id="click">click here</button>

<button><div id="animationblock">animated button</button>

</body>

</html>

Click below link to see output :

online demo: jQuery animated button
Advertisement

Related Tags for jQuery Button:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: December 3, 2009

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com