玩转jQuery按钮 请告诉我你最喜欢哪些？_jquery

在Web的世界里，按钮对于我们来说再也普通不过了，当然也用得比较多。今天这篇文章我主要向大家分享20个基于jQuery和CSS技术的按钮， 这些基于jQuery的按钮都非同凡响。希望这些jQuery按钮能给你带来帮助，好了，来一起看看这些漂亮的按钮吧。

英文原文中有些重复和打不开链接的例子我去掉了。

注：转载请注明以下信息，否则保留那个什么的权利

英文原文：http://speckyboy.com/2010/05/26/20-awesome-jquery-enhanced-css-button-techniques/

译文链接：http://www.itivy.com/jquery/archive/2012/1/5/jquery-css-button.html

这篇文章主要是展示了一个利用css sprites和jquery实现的鼠标滑过按钮的效果，第一部分教程主要告诉大家如何利用ps等画图工具制作这个精美的按钮。第二部分教程主要是将设计好的按钮图转换成HTML和CSS，并利用jQuery给这个按钮加上动画特效。

第一部分教程    |    第二部分教程    |    在线示例

这个按钮教程主要是介绍了一个仿GitHub的按钮特效，用到了一点点HTML、CSS、jQuery。

查看教程    |    在线示例

这是一个带圆角的http://www.itivy.com/jquery/archive/2012/1/5/jquery-css-button.html0，放心，你不必担心在不同浏览器中会没有圆角，因为他几乎兼容所有版本的浏览器，包括IE6。

http://www.itivy.com/jquery/archive/2012/1/5/jquery-css-button.html1    |    http://www.itivy.com/jquery/archive/2012/1/5/jquery-css-button.html2

这个jquery按钮则是仿Google搜索的按钮，你可以用少量的css代码去自定义这些按钮的样式。

http://www.itivy.com/jquery/archive/2012/1/5/jquery-css-button.html4    |    http://www.itivy.com/jquery/archive/2012/1/5/jquery-css-button.html5

这个http://www.itivy.com/jquery/archive/2012/1/5/jquery-css-button.html0也是一个鼠标滑过特效，鼠标滑过时按钮出现渐变效果。

http://www.itivy.com/jquery/archive/2012/1/5/jquery-css-button.html8    |    http://www.itivy.com/jquery/archive/2012/1/5/jquery-css-button.html9

这个jquery按钮也是鼠标滑过特效，不同的是，当鼠标滑过时，按钮的padding发生变化，并且是带有动画的哦。

Creative Button Animations with Sprites and jQuery1    |    Creative Button Animations with Sprites and jQuery2

这个jquery按钮非常有特色，是仿Skype的，当你鼠标移上去的时候，呵呵，自己去试试，我不说了。

Creative Button Animations with Sprites and jQuery4    |    Creative Button Animations with Sprites and jQuery5

呵呵，又是一个比较有特色的jquery按钮，这个是仿iPhone开锁键的，还不错，可以看看。

PatentPal专利申请写作

AI软件来为专利申请自动生成内容

13

查看详情

Creative Button Animations with Sprites and jQuery7    |    Creative Button Animations with Sprites and jQuery8

OH，这个NB了，这是基于jquery ui的按钮，这个jquery按钮也可以用来做工具栏的按钮，真棒！

第一部分教程0    |    第一部分教程1

这个http://www.itivy.com/jquery/archive/2012/1/5/jquery-css-button.html0也是简单的鼠标移过特效，个人觉得还挺大气的。

第一部分教程4    |    第一部分教程5

这个jquery按钮则是专为提交表但设计的，用Ajax提交的时候按钮出现一张waiting的gif图片，由此可见，这个按钮是重写过的，不信你自己看看。

第一部分教程7    |    第一部分教程8

这个按钮其实也是一个鼠标滑过特效啦，在“ON”和“OFF”之间切换。

第二部分教程0    |    第二部分教程1

一个简单的jquery鼠标滑过渐变按钮，不多说，自己看。

第二部分教程3    |    第二部分教程4

这也是一个非常基本的jquery按钮，你可以自己定义一些颜色，其实个人觉得，只要颜色搭配好，即使简单的按钮也能炫目多彩。

第二部分教程6    |    第二部分教程7

这个jquery按钮也非常有特点，鼠标移上去，按钮立即展开，非常帅气。

第二部分教程9    |    在线示例0

好了，上面的这些jquery css按钮就介绍完了，是否有你喜欢的呢？请告诉我，我期待我的发现得到你的肯定。