相思资源网 Design By www.200059.com
在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,按钮

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“玩转jQuery按钮 请告诉我你最喜欢哪些?”

暂无玩转jQuery按钮 请告诉我你最喜欢哪些?的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?