<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS之按钮过滤</title>
</head>
<style type="text/css">
html,body,.wrapper{
height:100%;}

body{
background:#000000;
background-size:cover;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.wrapper{
width:100%;
}
.holder {
width: 100%;
}

a.animBtn:link, a.animBtn:visited {
position: relative;
display: block;
width: 180px;
margin: 30px auto 0;
padding: 14px 15px;
border: 2px solid #fff;
background: rgba(255, 255, 255, 0.2);
color: #fff;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
/*text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);*/
text-shadow:0 1px 1px rgba(0,0,0,0.2);
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
a.animBtn:link:after, a.animBtn:visited:after {
content: "";
position: absolute;
background: none repeat scroll 0 0 #fff;
height: 0%;
left: 50%;
top: 50%;
width: 100%;
z-index: -1;
-webkit-transition: all .3s ease 0s;
-moz-transition: all .3s ease 0s;
-o-transition: all .3s ease 0s;
transition: all .3s ease 0s;
}
a.animBtn:link:hover, a.animBtn:visited:hover {
color: #333;
text-shadow: none;
}
a.animBtn:link:hover:after, a.animBtn:visited:hover:after {
height: 420%;
}

a.animBtn.themeA:after {
-moz-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
a.animBtn.themeB:after {
-moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
a.animBtn.themeC:after {
opacity: .5;
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
a.animBtn.themeC:hover:after {
height: 140%;
opacity: 1;
}
a.animBtn.themeD:after {
width: 0%;
border-radius: 50%;
opacity: .5;
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
a.animBtn.themeD:hover:after {
height: 450%;
width: 110%;
opacity: 1;
}
</style>

<body>
<input type="button" value="关闭" name="close" onclick="window.close()" />
<div style="text-align:center;clear:both;">
</div>
<div class="wrapper">
<p class="holder">
<a href="#" class="animBtn themeA">Discover More A</a>
<a href="#" class="animBtn themeB">Discover More B</a>
<a href="#" class="animBtn themeC">Discover More C</a>
<a href="#" class="animBtn themeD">Discover More D</a>
</p>
</div>
</body>
</html>

CSS之按钮过滤的更多相关文章

  1. CSS3实战开发: 纯CSS实现图片过滤分类显示特效

    原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...

  2. 漂亮的自适应宽度的多色彩CSS图片按钮

    一.素材               二.效果 三.CSS *{padding:0;margin:0} /*----------------------------------- 自适应宽度图片按钮 ...

  3. css中按钮的四种状态

    css中按钮有四种状态 1. 普通状态2. hover 鼠标悬停状态3. active 点击状态4. focus 取得焦点状态 .btn:focus{outline:0;} 可以去除按钮或a标签点击后 ...

  4. CSS实现按钮点击后根据背景色加深效果-一颗优雅草bigniu

    具体代码如下 button{ position: relative; } button:active::before { display: block; content: ''; position: ...

  5. Css - 渲染按钮

    基本的css3按钮渲染 <style type="text/css"> background: #f7f7f7; /* for Webkit */ background ...

  6. 用事件与CSS改变按钮不同状态下的颜色

    目标效果: 表单的群发按钮,在鼠标悬停时为深蓝色,鼠标离开时为淡蓝色. HTML代码: <button id="submitBtn"  class="btn&quo ...

  7. js判断奇偶数实现隐藏显示功能 与css立体按钮

      hello!   好久不见了 ,今天也没准备什么技术,知识想和大家就见个面,一个js判断奇数偶数来实现css样式 ,感觉最大的用途就是页面的导航.就这么一个小小的技术. 劳动快乐   当!当!当! ...

  8. 【CSS】按钮的禁用与可用 CSS Cursor 属性

    禁用时的样式 可用时的样式 样式很简单,禁用就设置为灰色,可用就设置为红色,今天这个不是重点,重点的是,光标的样子 一般,禁用时候,光标移动到按钮的上方,光标如下 而在启用按钮的时候,光标移动到按钮上 ...

  9. DIV+CSS布局重新学习之使用A标签和CSS制作按钮

    这里主要利用A元素的伪类来实现: a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hove ...

随机推荐

  1. git mv与直接mv的区别

    git mv 行为: 1.创建一个和之前文件内容一样的文件,文件名为新的文件名 2.将原来的文件删除 3.将删除的文件添加到暂存区 4.将新建的文件添加到暂存区 $ git mv a a1 $ git ...

  2. Spark高速入门指南(Quick Start Spark)

    版权声明:本博客已经不再更新.请移步到Hadoop技术博客:https://www.iteblog.com https://blog.csdn.net/w397090770/article/detai ...

  3. Spark2.0机器学习系列之1： 聚类算法(LDA）

    在Spark2.0版本中(不是基于RDD API的MLlib),共有四种聚类方法:      (1)K-means      (2)Latent Dirichlet allocation (LDA)  ...

  4. JVM之基本概念

    1.类加载子系统:负责从文件系统或者网络中加载Class信息,加载的信息存放在一块称之为方法区的内存空间. 2.方法区:就是存放类信息.常量信息.常量池信息.包括字符串字面量和数字常量等.方法区是辅助 ...

  5. matplotlib 的 subplot, axes and axis

    fig = plt.figure('多图', (10, 10), dpi=80) #第一个指定窗口名称,第二个指定图片大小,创建一个figure对象 plt.subplot(222) #2*2的第二个 ...

  6. shared_ptr的线程安全

    1.9 再论shared_ptr 的线程安全 虽然我们借shared_ptr 来实现线程安全的对象释放,但是shared_ptr 本身不是100% 线程安全的.它的引用计数本身是安全且无锁的,但对象的 ...

  7. JS传参中文乱码问题.NET

    前台js代码 window.location.href = "/product.aspx?id=2&title=" +encodeURIComponent(strtitle ...

  8. ruby中的instance_eval,class_eval,eval

    ruby具有在运行时执行以字符串形式保存的代码的功能设施,eval族方法 .包括Kernel#eval,Object#instance_eval,Module#class_eval. Kernel#e ...

  9. 关于TOSCA自动化测试工具， 我想问一些问题（持续整理中）

    通过学习,实践踩坑,有以下问题不太明白 1.  Artifacts and results from your complete test portfolio (cross-browser, mobi ...

  10. python单元测试框架pytest——fixture函数（类似unitest的setup和teardown）

    pytest的setup和teardown函数(曾被一家云计算面试官问到过). pytest提供了fixture函数用以在测试执行前和执行后进行必要的准备和清理工作.与python自带的unitest ...