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.
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
Animation Output
Hope you will like this.