i want to have this button effect on my website, theres an example on http://www.ohlife.com when you click the signup, for free green button , it deos this kool effect(it pushes back)!!, i hope i make sense!!
Add a comment
|
1 Answer
Basically this just uses a background sprite image and defines different states through some jQuery. If you look at the background image for the button http://ohlife.com/img/static/signup/btn_signup.gif You'll see the different states involved. In essence the CSS statement will define each state by just changing the position of the background image. i.e.
input { background-position: 0 0 }
input.click { background-position: 0 -100px; }
input.mouseover { background-position: 0 -200px; }
In the jQuery you can then specify the addition of classes for different mouse events, for instance:
$(document).ready(function(){
$(input).mouseover(function() {
input.removeClass('click');
input.addClass('mouseover');
});
$(input).click(function() {
input.removeClass('mouseover');
input.addClass('click');
});
});
Note - the code here is untested but should give you the general idea of what to do.
1 Comment
wavetree
You can do it without requiring JavaScript, too. Just use :hover and :active pseudoclasses.