In this part of the tutorial we are going to add the HTML, CSS and Jquery to the image we created. The hover effect is based on the Easing Plug-in.
Step 1: HTML
This is the simple HTML markup for the button. You can also add more buttons by just copying the below code and changing the class button to some other.This will go in body of page.
<div id="nav">
<a class="button" href="#"></a>
</div>
Step 2: CSS
Add the following CSS to the head of your HTML document.
body{
background:#4d4d4d;}
#nav{
width:auto;
height:200px;}
.button{
background-image:url(buttonease.jpg);
background-position:0px 0px;
width:180px;
height:110px;
display:block;}
.button .hover {
background-image:url(buttonease.jpg);
background-position: -0px -109px;
height:110px;
display:block;
opacity: 0;}
Creating new class
If you are creating new button class then remember to add opacity:0; to its hover otherwise the hover image will come first on refreshing the page
Step 3:Jquery
Our button is powered by Jquery and Jquery.Easing.v1.3
Add the following to the head section of your HTML page.
Step 4: Knowing Jquery
If you are adding more buttons then you will also need more classes for that button. Therefore for hover effect you will have to link that class with jquery. Suppose I createdbutton2 as new class so the new jquery will be as below
$(function(){
$('.button .button2').append('')
$('.button .button2').hover(function() {
// Function performed on hover
$('.hover', this).stop().animate({
'opacity': 1
}, 700,'easeOutSine')
},function() {
//Function performed on removing the cursor
$('.hover', this).stop().animate({
'opacity': 0
}, 700, 'jswing')
})
});
easeOutSine and jswing are two easing effects. There are more effects which you can see at Jquery.Easing.v1.3
No Response to "Create sexy easing buttons in Photoshop (Part-2 Jquery markup)"
Post a Comment