一款基于jquery漂亮的按钮
之前为大家分享了好多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漂亮的按钮的更多相关文章
- 一款基于CSS3漂亮的按钮
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- 一款基于jquery ui漂亮的可拖动div实例
今天要给大家带来一款基于jquery ui漂亮的可拖动div实例.这款实例用了图片当背景,div层采用了幽灵透明效果.div拖动是基于jquery ui的.界面非常漂亮.一起看下效果图: 在线预览 ...
- 分享一款基于jquery的圆形动画按钮
之前为大家介绍过一款纯css3实现的圆形旋转分享按钮.今天要给大家带来一款基于jquery的圆形动画按钮.这款按钮鼠标经过的时候以边框转圈,然后逐渐消息,在实例中给出了四种颜色的demo.效果图如下: ...
- 一款基于jquery和css3实现的摩天轮式分享按钮
之前分享了很多css3实现的按钮.今天要给大家带来一款基于jquery和css3实现的摩天轮式分享按钮.这款分享按钮页面底部有一个toggle按钮,单击该按钮,摩天轮按钮以动画的形式出现,各个分享按钮 ...
- 一款基于jquery的喜欢动画按钮
今天给大家带来一款基于jquery的喜欢动画按钮.这个实例中给了三种动画特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <p class='heading'> C ...
- 10款基于jquery实现的超酷动画源码
1.jQuery二级下拉菜单 下拉箭头翻转动画 之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽.但今天要介绍的这款j ...
- 一款基于jquery的下拉点击改变背景图片
今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览 源码下载 实现的代码. html代码: <a ...
- 10款基于jquery的web前端特效及源码下载
1.jQuery时间轴插件:jQuery Timelinr 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚 ...
- 8款基于Jquery的WEB前端动画特效
1.超炫酷的30个jQuery按钮悬停动画 按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的是30个超炫酷的jQuery悬停按钮动画,当我们将鼠标滑过按钮 ...
随机推荐
- vs2017预览版下载
vs2017预览版,没有限制的不过不能生成生产版本,集成最新的功能! 下载地址: https://www.visualstudio.com/zh-hans/vs/preview/
- cxf之java.lang.NoSuchMethodError: org.springframework.aop.support.AopUtils.isCglibProxyClass(Ljava/lang/C
想用cxf发布一个web服务,但是容器启动报这个错,求高人解答啊 [问题点数:20分,无满意结帖,结帖人shijing266] 楼主好懒,主要还是jar版本的问题,spring4.2.0以上需要使用c ...
- MyBatis JdbcType 与Oracle、MySql数据类型对应关系详解
本文转自:http://blog.csdn.net/loongshawn/article/details/50496460 1. Mybatis JdbcType与Oracle.MySql数据类型对应 ...
- HDUOJ--1874 畅通工程续
畅通工程续 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- Android开发之Button事件实现方法的总结
下面介绍Button事件实现的两种方法 main.xml <?xml version="1.0" encoding="utf-8"?> <Li ...
- JMeter学习笔记--详解JMeter逻辑控制器
JMeter使用逻辑控制器来决定采样器的处理顺序 简单控制器(Simple Controller):存储设备(将某些采样器归组) 循环控制器(Loop Controller:设置循环次数 仅一次控制器 ...
- 消息队列实现回射客户/服务器和 msgsnd、msgrcv 函数
一.msgsnd 和 msgrcv 函数 #include <sys/types.h> #include <sys/ipc.h> #include <sys/ms ...
- jquery 事件注冊 与反复事件处理
<!doctype html> <html lang="us"> <head> <meta charset="utf-8&quo ...
- Centos 5.6安装Mysql(步骤,疑问)
1.安装步骤 yum install mysql yum install mysql-server yum install mysql-devel chgrp -R mysql /var/lib/my ...
- NEXYS 3开发板练手--USB UART(一)
接上一篇文章,今天来讲讲这个USB UART串口发送机. 我们知道,当我们的微处理器(单片机.FPGA.DSP等)要和电脑进行通信的时候一般会采用串行通信方式,而最常用的串行通信协议的物理层接口是RS ...