在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
这篇文章主要是展示了一个利用css sprites和jquery实现的鼠标滑过按钮的效果,第一部分教程主要告诉大家如何利用ps等画图工具制作这个精美的按钮。第二部分教程主要是将设计好的按钮图转换成HTML和CSS,并利用jQuery给这个按钮加上动画特效。
第一部分教程 | 第二部分教程 | 在线示例
这个按钮教程主要是介绍了一个仿GitHub的按钮特效,用到了一点点HTML、CSS、jQuery。
查看教程 | 在线示例
这是一个带圆角的jquery按钮,放心,你不必担心在不同浏览器中会没有圆角,因为他几乎兼容所有版本的浏览器,包括IE6。
查看教程 | 在线示例
这个jquery按钮则是仿Google搜索的按钮,你可以用少量的css代码去自定义这些按钮的样式。
查看教程 | 在线示例
这个jquery按钮也是一个鼠标滑过特效,鼠标滑过时按钮出现渐变效果。
查看教程 | 在线示例
这个jquery按钮也是鼠标滑过特效,不同的是,当鼠标滑过时,按钮的padding发生变化,并且是带有动画的哦。
查看教程 | 在线示例
这个jquery按钮非常有特色,是仿Skype的,当你鼠标移上去的时候,呵呵,自己去试试,我不说了。
查看教程 | 在线示例
呵呵,又是一个比较有特色的jquery按钮,这个是仿iPhone开锁键的,还不错,可以看看。
查看教程 | 在线示例
OH,这个NB了,这是基于jquery ui的按钮,这个jquery按钮也可以用来做工具栏的按钮,真棒!
查看教程 | 在线示例
这个jquery按钮也是简单的鼠标移过特效,个人觉得还挺大气的。
查看教程 | 在线示例
这个jquery按钮则是专为提交表但设计的,用Ajax提交的时候按钮出现一张waiting的gif图片,由此可见,这个按钮是重写过的,不信你自己看看。
查看教程 | 在线示例
这个按钮其实也是一个鼠标滑过特效啦,在“ON”和“OFF”之间切换。
查看教程 | 在线示例
一个简单的jquery鼠标滑过渐变按钮,不多说,自己看。
查看教程 | 在线示例
这也是一个非常基本的jquery按钮,你可以自己定义一些颜色,其实个人觉得,只要颜色搭配好,即使简单的按钮也能炫目多彩。
查看教程 | 在线示例
这个jquery按钮也非常有特点,鼠标移上去,按钮立即展开,非常帅气。
查看教程 | 在线示例
好了,上面的这些jquery css按钮就介绍完了,是否有你喜欢的呢?请告诉我,我期待我的发现得到你的肯定。
分享到:
相关推荐
希望这些jQuery按钮能给你带来帮助,好了,来一起看看这些漂亮的按钮吧。 英文原文中有些重复和打不开链接的例子我去掉了。 注:转载请注明以下信息,否则保留那个什么的权利 英文原文:...
《轻松玩转jquery》这本书很赞,但是一直找不到这本书的源代码,现在终于找到了,分享一下
jquery旋转按钮,利用js对按钮进行取值与设值操作
jQuery实现按钮滑动切换
江哥带你玩转Jquery素材下载,李南江Jquery素材资源。
jquery三维动画旋转按钮
jquery upload 中文上传按钮
jquery 单选按钮点击切换
jquery.knob.js是一款简单实用的基于SVG的jQuery旋转按钮插件。该插件通过jquery和jquery ui来动态生成基于SVG的旋转按钮。
jquery按钮弹出提示框
jquery_Switch按钮插件
jquery 监听页面按钮 jquery1.5 监听事件
Jquery动态按钮,支持动态影子,反光,镜子效果等,实现简单,使用Css动画实现
jquery实现的滑动按钮,包括js代码
仿百度有啊Flash式按钮跳动效果 仿百度有啊Flash式按钮跳动效果
jQuery单选多选按钮样式美化代码jquery.1.10.2.min.js,有删除功能,按钮类型有圆心、圆钩、方心、方钩。
30种jQuery悬停按钮动画特效是一款美丽实用的jQuery按钮特效。
jQuery复制按钮复制指定文本,简单实用