玩转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按钮就介绍完了,是否有你喜欢的呢?请告诉我,我期待我的发现得到你的肯定。

Javascript 相关文章推荐
js弹出div并显示遮罩层
Feb 12 Javascript
jQuery插件制作之全局函数用法实例
Jun 01 Javascript
freemarker判断对象是否为空的方法
Aug 13 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
javascript中闭包(Closure)详解
Jan 06 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 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
You might like
php中实现记住密码自动登录的代码
2011/03/02 PHP
如何在PHP中使用正则表达式进行查找替换
2013/06/13 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
Python文件夹与文件的操作实现代码
2014/07/13 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
Linux面试题LINUX系统类
2015/11/25 面试题
生物技术专业研究生自荐信
2013/09/22 职场文书
房地产员工找工作的自我评价
2013/11/15 职场文书
法定授权委托证明书
2014/09/27 职场文书
证券公司客户经理岗位职责
2015/04/09 职场文书
《学会看病》教学反思
2016/02/17 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis