编程 Javascript

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

Posted in Javascript onJanuary 08, 2012

在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

Creative Button Animations with Sprites and jQuery

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

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

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

GitHub-Style Buttons with CSS and jQuery (or MooTools, or the Dojo JavaScript)

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

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

查看教程 | 在线示例

Cross-Browser Rounded Buttons with CSS3 and jQuery

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

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

查看教程 | 在线示例

jQuery Imageless Buttons a la Google

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

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

查看教程 | 在线示例

Animated “Call to Action” Button

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

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

查看教程 | 在线示例

Nice Menu : CSS Animation & jQuery Animate

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

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

查看教程 | 在线示例

Skype-Like Buttons Using jQuery

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

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

查看教程 | 在线示例

jQuery iPhone Style Ajax Switch

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

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

查看教程 | 在线示例

jQuery UI CSS Framework Buttons and Toolbars

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

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

查看教程 | 在线示例

Simple "Call To Action" Button With CSS & jQuery

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

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

查看教程 | 在线示例

Create a Simple Interactive CSS Button with jQuery

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

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

查看教程 | 在线示例

Button Hover Fading Transition with jQuery

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

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

查看教程 | 在线示例

Cursor Hover Plugin

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

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

查看教程 | 在线示例

jQuery hashchange event

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

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

查看教程 | 在线示例

Awesome CSS3 & jQuery Slide Out Button

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

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

查看教程 | 在线示例

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

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

清空上传控件input file的值

Jul 03 Javascript

jQuery取得select选择的文本与值的示例

Dec 09 Javascript

javascript 通用loading动画效果实例代码

Jan 14 Javascript

教你如何使用node.js制作代理服务器

Nov 26 Javascript

jquery实现点击向下展开菜单项(伸缩导航)效果

Aug 22 Javascript

详解Bootstrap glyphicons字体图标

Jan 04 Javascript

使用jQuery制作基础的Web图片轮播效果

Apr 22 Javascript

js接收并转化Java中的数组对象的方法

Aug 11 Javascript

微信小程序 request接口的封装实例代码

Apr 26 Javascript

JS实现随机生成10个手机号的方法示例

Dec 07 Javascript

jQuery实现日历效果

Sep 11 jQuery

webpack介绍使用配置教程详解webpack介绍和使用

Jun 25 Javascript

分享几个超级震憾的图片特效

Jan 08 #Javascript

关于JAVASCRIPT urldecode URL解码的问题

Jan 08 #Javascript

JAVASCRIPT车架号识别/验证函数代码汽车车架号验证程序

Jan 08 #Javascript

人人网javascript面试题可以提前实现下

Jan 05 #Javascript

javascript是怎么继承的介绍

Jan 05 #Javascript

js 链式延迟执行DOME

Jan 04 #Javascript

常见效果实现之返回顶部(结合淡入、淡出、减速滚动)

Jan 04 #Javascript

GNN(1) Pytesseract(1) 柱状图(1) GCN(1) 匹配文本(1) SFTP(3) 验证码(1) 文字识别(1) flex-shrink(1) 追加文本(1)

You might like

一个PHP数组应该有多大的分析

2009/07/30 PHP

PHP数据库调用类调用实例(详细注释)

2012/07/12 PHP

toString()一个会自动调用的方法

2010/02/08 Javascript

JS添加删除一组文本框并对输入信息加以验证判断其正确性

2013/04/11 Javascript

js综合应用实例简单的表格统计

2013/09/03 Javascript

提交按钮的name＝'submit'引起的js失效问题及原因

2015/02/25 Javascript

解析NodeJs的调试方法

2016/12/11 NodeJs

JS实现数组按升序及降序排列的方法

2017/04/26 Javascript

socket.io学习教程之深入学习篇（三）

2017/04/29 Javascript

js获取地址栏参数的两种方法

2017/06/27 Javascript

ReactNative页面跳转Navigator实现的示例代码

2017/08/02 Javascript

Vue 实时监听窗口变化 windowresize的两种方法

2018/11/06 Javascript

细说Vue组件的服务器端渲染的过程

2019/05/30 Javascript

Node.js Domain 模块实例详解

2020/03/18 Javascript

详解vue父子组件状态同步的最佳方式

2020/09/10 Javascript

解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况

2020/10/30 Javascript

JavaScript setTimeout()基本用法有哪些

2020/11/04 Javascript

python实现协同过滤推荐算法完整代码示例

2017/12/15 Python

python操作列表的函数使用代码详解

2017/12/28 Python

详解python算法之冒泡排序

2019/03/05 Python

详解python的四种内置数据结构

2019/03/19 Python

python修改FTP服务器上的文件名

2019/09/11 Python

pygame实现俄罗斯方块游戏（AI篇1）

2019/10/29 Python

Python pickle模块实现对象序列化

2019/11/22 Python

PyTorch如何搭建一个简单的网络

2020/08/24 Python

会走动的图形html5时钟示例

2014/04/27 HTML / CSS

飞利浦比利时官方网站：Philips比利时

2016/08/24 全球购物

劳资专员岗位职责

2013/12/27 职场文书

预防艾滋病宣传标语

2014/06/25 职场文书

工作所在部门证明

2014/09/21 职场文书

幼儿园教师节感谢信

2015/01/23 职场文书

法律意见书范文

2015/06/04 职场文书

入党转正申请自我鉴定

2019/06/25 职场文书

dubbo集成zipkin获取Traceid的实现

2021/07/26 Java/Android

pycharm无法安装cv2模块问题

2022/05/20 Python

Go gorilla/sessions库安装使用

2022/08/14 Golang