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');
});

});

注意 - 此处的代码未经测试，但应该让您大致了解该怎么做。

如何使用jquery / css进行可点击按钮效果？示例提供

1 个答案: