之前为大家分享了好多css3实现的按钮。今天给大家分享一款基于jquery漂亮的按钮。这款按钮背景下用了一张图片。当鼠标经过的时候背景用半透明div遮住。一起看下效果图:

在线预览   源码下载

实现的代码。

html代码:

 <a class="btn" data-js="btn"><span class="btn-inr"><span class="txt-a">See This Button?</span>
<span class="txt-b">Now You do.</span> </span></a>
<script src='jquery.js'></script>
<script src='StackBlur.js'></script>
<script>
$('[data-js="btn"]').hover(function (e) {
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$('body').addClass('blur');
} else {
$('body').removeClass('blur');
}
e.preventDefault();
}); //@ sourceURL=pen.js
</script>

css代码:

        .btn
{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
} *, *::before, *::after
{
-moz-box-sizing: border-box;
box-sizing: border-box;
} html, body
{
width: 100%;
height: 100%;
} body
{
position: relative;
font-family: "Lato" , "Avant Garde" , Avantgarde, "Century Gothic" , CenturyGothic, "AppleGothic" , sans-serif;
font-weight:;
text-align: center;
overflow: hidden;
background: url(1.jpg) no-repeat center center;
background-size: cover;
}
body::after
{
position: absolute;
top:;
left:;
display: block;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(315deg, #2980b9 0%, #9B59B6 100%);
background: linear-gradient(135deg, #2980b9 0%, #9B59B6 100%);
background-size: 100% auto;
content: "";
opacity:;
-webkit-transition: all .65s ease-in-out;
transition: all .65s ease-in-out;
} .blur::after
{
opacity: .85;
} .btn
{
position: relative;
display: inline-block;
border: 6px solid #ed7669;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
z-index:;
}
.btn.active
{
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
}
.btn:focus, .btn:hover
{
border: 12px solid #e74c3c;
} .btn > span
{
min-width: 425px;
cursor: pointer;
} .btn-inr
{
display: inline-block;
color: white;
font-weight:;
font-size: 2em;
line-height:;
text-transform: uppercase;
background: #ed7669;
padding: 1em 2em;
margin: 6px;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.btn-inr:focus, .btn-inr:hover
{
background: #e74c3c;
padding: 1em 2em;
margin:;
} .txt-a
{
display: inline;
} .txt-b
{
display: none;
} .btn:focus .btn-inr, .btn:hover .btn-inr
{
background: #e74c3c;
padding: 1em 2em;
margin:;
} .btn:focus .txt-a, .btn:hover .txt-a
{
display: none;
} .btn:focus .txt-b, .btn:hover .txt-b
{
display: inline;
}

注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/8990

一款基于jquery漂亮的按钮的更多相关文章

  1. 一款基于CSS3漂亮的按钮

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  2. 一款基于jquery ui漂亮的可拖动div实例

    今天要给大家带来一款基于jquery ui漂亮的可拖动div实例.这款实例用了图片当背景,div层采用了幽灵透明效果.div拖动是基于jquery ui的.界面非常漂亮.一起看下效果图: 在线预览   ...

  3. 分享一款基于jquery的圆形动画按钮

    之前为大家介绍过一款纯css3实现的圆形旋转分享按钮.今天要给大家带来一款基于jquery的圆形动画按钮.这款按钮鼠标经过的时候以边框转圈,然后逐渐消息,在实例中给出了四种颜色的demo.效果图如下: ...

  4. 一款基于jquery和css3实现的摩天轮式分享按钮

    之前分享了很多css3实现的按钮.今天要给大家带来一款基于jquery和css3实现的摩天轮式分享按钮.这款分享按钮页面底部有一个toggle按钮,单击该按钮,摩天轮按钮以动画的形式出现,各个分享按钮 ...

  5. 一款基于jquery的喜欢动画按钮

    今天给大家带来一款基于jquery的喜欢动画按钮.这个实例中给了三种动画特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <p class='heading'> C ...

  6. 10款基于jquery实现的超酷动画源码

    1.jQuery二级下拉菜单 下拉箭头翻转动画 之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽.但今天要介绍的这款j ...

  7. 一款基于jquery的下拉点击改变背景图片

    今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览   源码下载 实现的代码. html代码: <a ...

  8. 10款基于jquery的web前端特效及源码下载

    1.jQuery时间轴插件:jQuery Timelinr 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚 ...

  9. 8款基于Jquery的WEB前端动画特效

    1.超炫酷的30个jQuery按钮悬停动画 按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的是30个超炫酷的jQuery悬停按钮动画,当我们将鼠标滑过按钮 ...

随机推荐

  1. HTML+CSS浏览器兼容性问题

    浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率:100% 解决方案:CSS里    ...

  2. Linux对包管理阐述

    Centos/Redhat/Fedora的软件包,都是rpm后缀的文件.包管理器rpm(Redhat packages manager)  linux的哲学思想是简单命令解决复杂任务,因此每个软件的功 ...

  3. Linux服务器修改时区时间

    时间的一致性很关键,对于日志的分析和程序的对接都至关重要! 01.tzselect 修改时区 可以使用命令 tzselect,修改时区.操作示例: $ tzselect Please identify ...

  4. virtualenv沙箱

    准备用Django开发网站,豆瓣阅读中有<Django入门>,里面有人批注说用virtualenv+pip很好. 每次搞个什么都感觉举步维艰,因为之前太懒了,什么都懒得深入看一下.pip一 ...

  5. 基于Arch的live系统

    今天在linuxsir的archlinux分区闲逛,看到了carbonjiao的帖子 http://bbs.linuxeye.cn/thread-652-1-1.html 同时还关注他的帖子:1.Ar ...

  6. ras api win7 和 win xp 遍历时的不同

    由于在调用RasEnumEntries和RasEnumConnections在xp和win7以上的操作系统中有所不同,所以在win7下正常的代码在xp不一定就可以. 主要是在win7 下可以给参数传N ...

  7. redhat 6.4 安装VirtualBox自动增强功能功:unable to find the sources of your current Linux kernel

    redhat 6.4 安装VirtualBox自动增强功能功能的时候提示: building the main Guest Additions module FAILED unable to find ...

  8. exec系列函数和system函数

    一.exec替换进程映象 在进程的创建上Unix采用了一个独特的方法,它将进程创建与加载一个新进程映象分离.这样的好处是有更多的余地对两种操作进行管理.当我们创建 了一个进程之后,通常将子进程替换成新 ...

  9. WM_MOUSELEAVE 和 WM_MOUSEHOVER 使用

    原文链接: http://www.cnblogs.com/weiqubo/archive/2011/04/14/2016323.html 默认情况下,窗口是不响应 WM_MOUSELEAVE 和 WM ...

  10. Python isalnum() 方法

    描述 Python isalnum() 方法检测字符串是否由字母和数字组成. 语法 isalnum()方法语法: S.isalnum() 参数 无. 返回值 如果字符串至少有一个字符并且所有字符都是字 ...