Question

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!!

Answer 1

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.