玩转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 相关文章推荐
面向对象的Javascript之一(初识Javascript)
Jan 20 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
如何手动实现es5中的bind方法详解
Dec 07 Javascript
Vue实现数据请求拦截
Oct 23 Javascript
js实现随机点名程序
Sep 17 Javascript
js实现抽奖的两种方法
Mar 19 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
分享几个超级震憾的图片特效
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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
php读取本地json文件的实例
2018/03/07 PHP
php微信公众号开发之欢迎老朋友
2018/10/20 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
用Python从零实现贝叶斯分类器的机器学习的教程
2015/03/31 Python
用Python实现随机森林算法的示例
2017/08/24 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
给女儿的表扬信
2014/01/18 职场文书
微观物理专业自荐信
2014/01/26 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
企业文化口号
2014/06/12 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
综合实践活动报告
2015/02/05 职场文书
中秋节寄语2015
2015/03/24 职场文书
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
Python使用Web框架Flask开发项目
2022/06/01 Python