在Web的世界里，按钮对于我们来说再也普通不过了，当然也用得比较多。今天这篇文章我主要向大家分享20个基于jQuery和CSS技术的按钮， 这些基于jQuery的按钮都非同凡响。希望这些jQuery按钮能给你带来帮助，好了，来一起看看这些漂亮的按钮吧。 英文原文中有些重复和打不开链接的例子我去掉了。 注：转载请注明以下信息，否则保留那个什么的权利 英文原文：[url=http://speckyboy.com/2010/05/26/20-awesome-jquery-enhanced-css-button-techniques/]http://speckyboy.com/2010/05/26/20-awesome-jquery-enhanced-css-button-techniques/[/url] 译文链接：[url=http://www.itivy.com/jquery/archive/2012/1/5/jquery-css-button.html]http://www.itivy.com/jquery/archive/2012/1/5/jquery-css-button.html[/url] [url=http://www.tutorial9.net/photoshop/creative-button-animations-with-sprites-and-jquery-part-1/]Creative Button Animations with Sprites and jQuery[/url] 这篇文章主要是展示了一个利用css sprites和jquery实现的鼠标滑过按钮的效果，第一部分教程主要告诉大家如何利用ps等画图工具制作这个精美的按钮。第二部分教程主要是将设计好的按钮图转换成HTML和CSS，并利用jQuery给这个按钮加上动画特效。 [img]http://files.jb51.net/file_images/article/201201/2012010822565511.png[/img] [url=http://www.tutorial9.net/photoshop/creative-button-animations-with-sprites-and-jquery-part-1/]第一部分教程[/url]    |    [url=http://www.tutorial9.net/web-tutorials/creative-button-animations-with-sprites-and-jquery-part-2/]第二部分教程[/url]    |    [url=http://tutorial9.net/demos/button-sprites/demo.html]在线示例[/url] [url=http://davidwalsh.name/github-css]GitHub-Style Buttons with CSS and jQuery (or MooTools, or the Dojo JavaScript)[/url] 这个按钮教程主要是介绍了一个仿GitHub的按钮特效，用到了一点点HTML、CSS、jQuery。 [img]http://files.jb51.net/file_images/article/201201/2012010822565512.png[/img] [url=http://davidwalsh.name/github-css]查看教程[/url]    |    [url=http://davidwalsh.name/dw-content/github-button.php]在线示例[/url] [url=http://www.cssnewbie.com/cross-browser-rounded-buttons/]Cross-Browser Rounded Buttons with CSS3 and jQuery[/url] 这是一个带圆角的[url=http://www.itivy.com/jquery]jquery按钮[/url]，放心，你不必担心在不同浏览器中会没有圆角，因为他几乎兼容所有版本的浏览器，包括IE6。 [img]http://files.jb51.net/file_images/article/201201/2012010822565513.png[/img] [url=http://www.cssnewbie.com/cross-browser-rounded-buttons/]查看教程[/url]    |    [url=http://www.cssnewbie.com/example/cross-browser-rounded-buttons/]在线示例[/url] [url=http://www.swizec.com/code/styledButton/]jQuery Imageless Buttons a la Google[/url] 这个jquery按钮则是仿Google搜索的按钮，你可以用少量的css代码去自定义这些按钮的样式。 [img]http://files.jb51.net/file_images/article/201201/2012010822565514.png[/img] [url=http://www.swizec.com/code/styledButton/]查看教程[/url]    |    [url=http://www.swizec.com/code/styledButton/]在线示例[/url] [url=http://sixrevisions.com/tutorials/web-development-tutorials/create-an-animated-call-to-action-button/]Animated “Call to Action” Button[/url] 这个[url=http://www.itivy.com/jquery]jquery按钮[/url]也是一个鼠标滑过特效，鼠标滑过时按钮出现渐变效果。 [img]http://files.jb51.net/file_images/article/201201/2012010822565515.png[/img] [url=http://sixrevisions.com/tutorials/web-development-tutorials/create-an-animated-call-to-action-button/]查看教程[/url]    |    [url=http://sixrevisions.com/demo/call-to-action-button/demo.html]在线示例[/url] [url=http://www.webstuffshare.com/2010/04/nice-menu-css-animation-jquery-animate/]Nice Menu : CSS Animation & jQuery Animate[/url] 这个jquery按钮也是鼠标滑过特效，不同的是，当鼠标滑过时，按钮的padding发生变化，并且是带有动画的哦。 [img]http://files.jb51.net/file_images/article/201201/2012010822565516.png[/img] [url=http://www.webstuffshare.com/2010/04/nice-menu-css-animation-jquery-animate/]查看教程[/url]    |    [url=http://webstuffshare.com/demo/CSSNiceMenu/]在线示例[/url] [url=http://www.jankoatwarpspeed.com/post/2009/03/11/How-to-create-Skype-like-buttons-using-jQuery.aspx]Skype-Like Buttons Using jQuery[/url] 这个jquery按钮非常有特色，是仿Skype的，当你鼠标移上去的时候，呵呵，自己去试试，我不说了。 [img]http://files.jb51.net/file_images/article/201201/2012010822565517.png[/img] [url=http://www.jankoatwarpspeed.com/post/2009/03/11/How-to-create-Skype-like-buttons-using-jQuery.aspx]查看教程[/url]    |    [url=http://www.jankoatwarpspeed.com/examples/skype_buttons/]在线示例[/url] [url=http://papermashup.com/jquery-iphone-style-ajax-switch/]jQuery iPhone Style Ajax Switch[/url] 呵呵，又是一个比较有特色的jquery按钮，这个是仿iPhone开锁键的，还不错，可以看看。 [img]http://files.jb51.net/file_images/article/201201/2012010822565518.png[/img] [url=http://papermashup.com/jquery-iphone-style-ajax-switch/]查看教程[/url]    |    [url=http://papermashup.com/demos/ajax-switch/]在线示例[/url] [url=http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/]jQuery UI CSS Framework Buttons and Toolbars[/url] OH，这个NB了，这是基于jquery ui的按钮，这个jquery按钮也可以用来做工具栏的按钮，真棒！ [img]http://files.jb51.net/file_images/article/201201/2012010822565519.png[/img] [url=http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/]查看教程[/url]    |    [url=http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/]在线示例[/url] [url=http://www.hongkiat.com/blog/simple-call-to-action-button-with-css-jquery/]Simple "Call To Action" Button With CSS & jQuery[/url] 这个[url=http://www.itivy.com/jquery]jquery按钮[/url]也是简单的鼠标移过特效，个人觉得还挺大气的。 [img]http://files.jb51.net/file_images/article/201201/2012010822565520.png[/img] [url=http://www.hongkiat.com/blog/simple-call-to-action-button-with-css-jquery/]查看教程[/url]    |    [url=http://media02.hongkiat.com/call2action_button_tuts/demo/index.html]在线示例[/url] [url=http://www.queness.com/post/3157/create-a-simple-interactive-css-button]Create a Simple Interactive CSS Button with jQuery[/url] 这个jquery按钮则是专为提交表但设计的，用Ajax提交的时候按钮出现一张waiting的gif图片，由此可见，这个按钮是重写过的，不信你自己看看。 [img]http://files.jb51.net/file_images/article/201201/2012010822565521.png[/img] [url=http://www.queness.com/post/3157/create-a-simple-interactive-css-button]查看教程[/url]    |    [url=http://www.queness.com/resources/html/button/index.html]在线示例[/url] [url=http://www.photoshop-plus.co.uk/2012/09/19/css3-background-position-fade-hover-effect/]Button Hover Fading Transition with jQuery[/url] 这个按钮其实也是一个鼠标滑过特效啦，在“ON”和“OFF”之间切换。 [img]http://files.jb51.net/file_images/article/201201/2012010822565522.png[/img] [url=http://www.photoshop-plus.co.uk/2012/09/19/css3-background-position-fade-hover-effect/]查看教程[/url]    |    [url=http://greg-j.com/static-content/hover-fade.html]在线示例[/url] [url=http://isthatclear.com/jquery/cursorHover/]Cursor Hover Plugin[/url] 一个简单的jquery鼠标滑过渐变按钮，不多说，自己看。 [img]http://files.jb51.net/file_images/article/201201/2012010822565523.png[/img] [url=http://isthatclear.com/jquery/cursorHover/]查看教程[/url]    |    [url=http://isthatclear.com/jquery/cursorHover/]在线示例[/url] [url=http://benalman.com/projects/jquery-hashchange-plugin/]jQuery hashchange event[/url] 这也是一个非常基本的jquery按钮，你可以自己定义一些颜色，其实个人觉得，只要颜色搭配好，即使简单的按钮也能炫目多彩。 [img]http://files.jb51.net/file_images/article/201201/2012010822565524.png[/img] [url=http://benalman.com/projects/jquery-hashchange-plugin/]查看教程[/url]    |    [url=http://benalman.com/code/projects/jquery-hashchange/examples/hashchange/#test4]在线示例[/url] [url=http://tympanus.net/codrops/2010/02/08/awesome-css3-jquery-slide-out-button/]Awesome CSS3 & jQuery Slide Out Button[/url] 这个jquery按钮也非常有特点，鼠标移上去，按钮立即展开，非常帅气。 [img]http://files.jb51.net/file_images/article/201201/2012010822565525.png[/img] [url=http://tympanus.net/codrops/2010/02/08/awesome-css3-jquery-slide-out-button/]查看教程[/url]    |    [url=http://www.tympanus.net/Tutorials/SlideOutButton/]在线示例[/url] 好了，上面的这些jquery css按钮就介绍完了，是否有你喜欢的呢？请告诉我，我期待我的发现得到你的肯定。