玩转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下用层来实现select的title提示属性
Feb 23 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
jquery定时滑出可最小化的底部提示层特效代码
Oct 02 Javascript
javascript定义变量时加var与不加var的区别
Dec 22 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
jQuery实现鼠标划过展示大图的方法
Mar 09 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
May 20 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 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的正则处理函数总结分析
2008/06/20 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
javascript indexOf函数使用说明
2008/07/03 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
python刷投票的脚本实现代码
2014/11/08 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
24式加速你的Python(小结)
2019/06/13 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
Django 大文件下载实现过程解析
2019/08/01 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
python -v 报错问题的解决方法
2020/09/15 Python
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
介绍一下mysql的日期和时间函数
2013/03/28 面试题
家长对孩子评语
2014/01/30 职场文书
招聘专员岗位职责
2014/03/07 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android
Python数组变形的几种实现方法
2022/05/30 Python