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

╰+哭是因爲堅強的太久メ 2022-05-14 01:18 137阅读 0赞

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

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

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

英文原文：[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]

译文链接：[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]

#### [Creative Button Animations with Sprites and jQuery][] ####

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

![2012010509344712.png][]

[第一部分教程][Creative Button Animations with Sprites and jQuery] | [第二部分教程][Link 1] | [在线示例][Link 2]

#### [GitHub-Style Buttons with CSS and jQuery (or MooTools, or the Dojo JavaScript)][GitHub-Style Buttons with CSS and jQuery _or MooTools_ or the Dojo JavaScript] ####

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

![2012010509352025.png][]

[查看教程][GitHub-Style Buttons with CSS and jQuery _or MooTools_ or the Dojo JavaScript] | [在线示例][Link 3]

#### [Cross-Browser Rounded Buttons with CSS3 and jQuery][] ####

这是一个带圆角的[jquery按钮][jquery]，放心，你不必担心在不同浏览器中会没有圆角，因为他几乎兼容所有版本的浏览器，包括IE6。

![2012010509354450.png][]

[查看教程][Cross-Browser Rounded Buttons with CSS3 and jQuery] | [在线示例][Link 4]

#### [jQuery Imageless Buttons a la Google][] ####

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

![2012010509361069.png][]

[查看教程][jQuery Imageless Buttons a la Google] | [在线示例][jQuery Imageless Buttons a la Google]

#### [Animated “Call to Action” Button][Animated _Call to Action_ Button] ####

这个[jquery按钮][jquery]也是一个鼠标滑过特效，鼠标滑过时按钮出现渐变效果。

![2012010509363882.png][]

[查看教程][Animated _Call to Action_ Button] | [在线示例][Link 5]

#### [Nice Menu : CSS Animation & jQuery Animate][Nice Menu _ CSS Animation _ jQuery Animate] ####

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

![2012010509370668.png][]

[查看教程][Nice Menu _ CSS Animation _ jQuery Animate] | [在线示例][Link 6]

#### [Skype-Like Buttons Using jQuery][] ####

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

![2012010509373171.png][]

[查看教程][Skype-Like Buttons Using jQuery] | [在线示例][Link 7]

#### [jQuery iPhone Style Ajax Switch][] ####

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

![2012010509375887.png][]

[查看教程][jQuery iPhone Style Ajax Switch] | [在线示例][Link 8]

#### [jQuery UI CSS Framework Buttons and Toolbars][] ####

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

![2012010509382389.png][]

[查看教程][jQuery UI CSS Framework Buttons and Toolbars] | [在线示例][jQuery UI CSS Framework Buttons and Toolbars]

#### [Simple "Call To Action" Button With CSS & jQuery][Simple _Call To Action_ Button With CSS _ jQuery] ####

这个[jquery按钮][jquery]也是简单的鼠标移过特效，个人觉得还挺大气的。

![2012010509385338.png][]

[查看教程][Simple _Call To Action_ Button With CSS _ jQuery] | [在线示例][Link 9]

#### [Create a Simple Interactive CSS Button with jQuery][] ####

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

![2012010509391592.png][]

[查看教程][Create a Simple Interactive CSS Button with jQuery] | [在线示例][Link 10]

#### [Button Hover Fading Transition with jQuery][] ####

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

![2012010509403968.png][]

[查看教程][Button Hover Fading Transition with jQuery] | [在线示例][Link 11]

#### [Cursor Hover Plugin][] ####

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

![2012010509410541.png][]

[查看教程][Cursor Hover Plugin] | [在线示例][Cursor Hover Plugin]

#### [jQuery hashchange event][] ####

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

![2012010509412728.png][]

[查看教程][jQuery hashchange event] | [在线示例][Link 12]

#### [Awesome CSS3 & jQuery Slide Out Button][Awesome CSS3 _ jQuery Slide Out Button] ####

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

![2012010509415142.png][]

[查看教程][Awesome CSS3 _ jQuery Slide Out Button] | [在线示例][Link 13]

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

[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/
[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
[Creative Button Animations with Sprites and jQuery]: http://www.tutorial9.net/photoshop/creative-button-animations-with-sprites-and-jquery-part-1/
[2012010509344712.png]: /images/20220514/22666e586c3d43c2a9c7f0316b3309e6.png
[Link 1]: http://www.tutorial9.net/web-tutorials/creative-button-animations-with-sprites-and-jquery-part-2/
[Link 2]: http://tutorial9.net/demos/button-sprites/demo.html
[GitHub-Style Buttons with CSS and jQuery _or MooTools_ or the Dojo JavaScript]: http://davidwalsh.name/github-css
[2012010509352025.png]: /images/20220514/310bceb46499417aa88e8f7bbaf271c6.png
[Link 3]: http://davidwalsh.name/dw-content/github-button.php
[Cross-Browser Rounded Buttons with CSS3 and jQuery]: http://www.cssnewbie.com/cross-browser-rounded-buttons/
[jquery]: http://www.itivy.com/jquery
[2012010509354450.png]: /images/20220514/a14a4b67b1c74f76bb0617bf409d8ec2.png
[Link 4]: http://www.cssnewbie.com/example/cross-browser-rounded-buttons/
[jQuery Imageless Buttons a la Google]: http://www.swizec.com/code/styledButton/
[2012010509361069.png]: /images/20220514/def60c5a18414e0eb859369c4b3a3231.png
[Animated _Call to Action_ Button]: http://sixrevisions.com/tutorials/web-development-tutorials/create-an-animated-call-to-action-button/
[2012010509363882.png]: /images/20220514/cd48c1e6e1fc4884a88243a0bda2d3cc.png
[Link 5]: http://sixrevisions.com/demo/call-to-action-button/demo.html
[Nice Menu _ CSS Animation _ jQuery Animate]: http://www.webstuffshare.com/2010/04/nice-menu-css-animation-jquery-animate/
[2012010509370668.png]: /images/20220514/c396d27e59094d019a808f4705f86bf4.png
[Link 6]: http://webstuffshare.com/demo/CSSNiceMenu/
[Skype-Like Buttons Using jQuery]: http://www.jankoatwarpspeed.com/post/2009/03/11/How-to-create-Skype-like-buttons-using-jQuery.aspx
[2012010509373171.png]: /images/20220514/56c3eb789a424c71ad6abf7faa193fb0.png
[Link 7]: http://www.jankoatwarpspeed.com/examples/skype_buttons/
[jQuery iPhone Style Ajax Switch]: http://papermashup.com/jquery-iphone-style-ajax-switch/
[2012010509375887.png]: /images/20220514/9f5260dc6ac4422cae24e8c54a7b25cc.png
[Link 8]: http://papermashup.com/demos/ajax-switch/
[jQuery UI CSS Framework Buttons and Toolbars]: http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/
[2012010509382389.png]: /images/20220514/1d7bb115910f4136b55da1643406dc1c.png
[Simple _Call To Action_ Button With CSS _ jQuery]: http://www.hongkiat.com/blog/simple-call-to-action-button-with-css-jquery/
[2012010509385338.png]: /images/20220514/e29b96dc5a2247c3aeb0ab188b308555.png
[Link 9]: http://media02.hongkiat.com/call2action_button_tuts/demo/index.html
[Create a Simple Interactive CSS Button with jQuery]: http://www.queness.com/post/3157/create-a-simple-interactive-css-button
[2012010509391592.png]: /images/20220514/4311d3bd1dde48909fc385d4f9675ac8.png
[Link 10]: http://www.queness.com/resources/html/button/index.html
[Button Hover Fading Transition with jQuery]: http://greg-j.com/2008/07/21/hover-fading-transition-with-jquery/
[2012010509403968.png]: /images/20220514/df2ab489e9a64eca856658fdf1e3a9ff.png
[Link 11]: http://greg-j.com/static-content/hover-fade.html
[Cursor Hover Plugin]: http://isthatclear.com/jquery/cursorHover/
[2012010509410541.png]: /images/20220514/6228c22e320e4510926861fde934935b.png
[jQuery hashchange event]: http://benalman.com/projects/jquery-hashchange-plugin/
[2012010509412728.png]: /images/20220514/318a2cd4b0524df1abbf28c920553520.png
[Link 12]: http://benalman.com/code/projects/jquery-hashchange/examples/hashchange/#test4
[Awesome CSS3 _ jQuery Slide Out Button]: http://tympanus.net/codrops/2010/02/08/awesome-css3-jquery-slide-out-button/
[2012010509415142.png]: /images/20220514/0bf47c19a4e84e0283a69311032b69bd.png
[Link 13]: http://www.tympanus.net/Tutorials/SlideOutButton/