Button Animation in JQuery using Visual Studio 2010 in VB.NET

Today buttons are no longer limited to particular size and color, you can give animation effect on buttons using JQuery to decorate your UI to give impressive effects.
  • 3022
Download Files:
 
In addition to give animation effect on buttons you can use JQuery to decorate your UI with colorful, glowing and animated buttons. Bring out styles on the buttons and animated them to give impressive effects.

Use the following code to make a simple JQuery animated button.

Code Example

 

<head>
<
title>Animate Button</title>
<
script src="jquery.js" type="text/javascript"></script>
<
script> 
   $(document).ready(function () {
      $("#click").click(function () {
        $("#animationblock").animate({ 
           width: "50%"
           opacity: 0.3,
           marginLeft: "0.5in"
           fontSize: "3em",
           borderWidth: "8px"
         }, 1500);
      });
   });
</script>
<
style>
div {
background-color:#45DDD8;
width:100px;  
border:1px solid red;
}
</style>
</
head>
<
body bgcolor="#e8e8ff">
  
<button id="click" 
      style="font-family: Verdana; font-size: small; font-weight: bold">
      Click on button</button>
   <br /><br />
 
  <button><div id="animationblock" 
      style="border: thin solid #CC0099; font-family: Verdana; font-size: small; font-weight: bold; background-color: #FFCCFF;">
      Button Animation</button>
   <p style="font-family: Verdana; font-size: small">
      If you click on the above it will animate and fade out.</p>
</body> 
</html>

Output
button1.gif

Animation Output
button2.gif

Hope you will like this.

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.