This tutorial will teach you how to use jQuery to implement a fade effect on buttons. Check out the demo here.
Start off by cutting the buttons you want to use from your psd. You can download some of our free ones here.
Start off by including jQuery. If you don’t know anything about jQuery, some good places to start are here or here.
First off, build a nice standard HTML.
<script src="jquery-1.4.min.js" type="text/javascript"><!--mce:0--></script> <div id="box"> <!-- This will be our button --> <a class="normal" href="#"> </a></div>
Next let’s create a style for these divs(include it via a link tag or via style in the head of your html):
#box{ margin-left:100px; margin-top:100px; } body{ background:#000; font-family:Georgia; color:#fff; font-size:1.5em; } a{ color:#fff; text-decoration:none; text-align:center; } /* normal is the non-active style. */ .normal{ display:block; width:254px; height:54px; background:url('button_off.png') no-repeat; position:relative; } /* hover is how the button looks like when the mouse is over it */ .hover{ display:block; width:254px; height:54px; background:url('button_on.png') no-repeat; position:relative; }
Next let’s write the jQuery code. Include it in your script tag in the head of your document
$(function() { // we're setting the opacity of the hover div to 0. This way it will be invisible. $(".hover").css("opacity","0"); //When the mouse moves over our hover div $(".hover").hover(function () { //Make it visible $(this).stop().animate({ opacity: 1.0 }, "slow"); }, //If the mouse leaves the div function () { //make the div invisible again $(this).stop().animate({ opacity: 0 }, "slow"); }); });
Check out a working example here. Feel free to copy everything and use as your own.
