Как я могу сделать эффект кнопки с помощью JQuery / CSS?пример предоставлен

Question

Я хочу, чтобы эффект этой кнопки был на моем веб-сайте, вот пример на http://www.ohlife.com, когда вы нажимаете на регистрацию, для бесплатной зеленой кнопки, это деактивирует этот эффект kool (он отталкивает) !!, я надеюсья имею смысл !! ​​

Answer 1

По сути, это просто использует фоновое изображение спрайта и определяет различные состояния с помощью некоторого jQuery. Если вы посмотрите на фоновое изображение кнопки http://ohlife.com/img/static/signup/btn_signup.gif, то увидите различные состояния. По сути, оператор CSS будет определять каждое состояние, просто меняя положение фонового изображения. т.е.

input { background-position: 0 0 }
input.click { background-position: 0 -100px; }
input.mouseover { background-position: 0 -200px; }

В jQuery вы можете указать добавление классов для различных событий мыши, например:

$(document).ready(function(){

$(input).mouseover(function() {
  input.removeClass('click');
  input.addClass('mouseover');
});

$(input).click(function() {
  input.removeClass('mouseover');
  input.addClass('click');
});

});

Примечание - код здесь не проверен, но должен дать вам общее представление о том, что делать.