之前为大家分享了好多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. LoadRunner 检查点函数总结

    今天我来总结一下Loadrunner中的检查点函数,主要介绍两个函数:web_find()和web_reg_find() 这两个函数均用于内容的查找,但两者也有本质的区别,具体介绍如下: 一.web_ ...

  2. android开发中WebView的使用(附完整程序)

    原文地址:http://www.pocketdigi.com/20110216/176.html WebView是个好东西,作用相当于一个迷你的浏览器,采用Webkit内核,因此完美支持html,ja ...

  3. Bugtags 让你的 APP 测试轻松、上线安心

    Bug 管理系统再进化 Bugtags 的创业团队,在过去几年,做了很多方向的尝试——没错,是开发了很多 APP. 每一轮迭代,都会被繁琐的 APP 测试困扰:无休止的截屏上传电脑,无数次的开发与测试 ...

  4. 【LeetCode】142. Linked List Cycle II (2 solutions)

    Linked List Cycle II Given a linked list, return the node where the cycle begins. If there is no cyc ...

  5. Evernote如何邮件分享

    把你的笔记通过邮件发送给别人,从而实现分享

  6. jsp处理表单上传图片(commons-fileupload-1.2.2.jar,commons-io-2.4.jar)

    upload.jsp <%@ page language="java" import="java.util.*" pageEncoding="U ...

  7. 【Linux】X window与文本模式的切换

    Linux默认的情况下会提供六个Terminal来让使用者登陆,切换的方式为:[Ctrl] + [Alt] + [F1]~[F6]的组合按钮.那这六个终端接口如何命名呢,系统会将[F1] ~ [F6] ...

  8. Web - TCP与UDP的差别

    是否面向连接:TCP面向连接.UDP面向非连接. 传输可靠性:TCP可靠.UDP不可靠. 应用场合:TCP经常使用于传输大量数据,UDP经常使用于传输少量数据. 速度:TCP传输速度较慢,而UDP速度 ...

  9. 在普通Java类里使用spring里注入的service、dao等

    版权声明:本文为博主武伟峰原创文章,转载请注明地址http://blog.csdn.net/tianyaleixiaowu. 在spring管理的web项目里,譬如Struts和spring的项目,配 ...

  10. java的多线程(一)

    我们知道我们打开个程序(或者说运行一款软件)其实也就是创建了一个进程,只不过程序是静态指令的集合,而进程是正在系统中运行的指令集合,进程是系统进行资源分配与调度的一个独立单位.进程具有独立性,动态性, ...