<!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. html5 live stream

    一.传统的安防监控/流媒体音视频直播基本架构 A/V device 信号采集(yuv/rgb) ---> 转码(h264/265) ---> 网络推送(rtsp/rtmp/http/onv ...

  2. 读写INI配置文件。

    核心函数: 写入.ini文件:bool WritePrivateProfileString(LPCTSTR lpAppName,//INI文件中的一个字段名 LPCTSTR lpKeyName,//l ...

  3. 我与前端之间不得不说的三天两夜之html基础

    HTML 初识 分类 cs模式 client-server bs模式 Browser-server web服务本质 from socket import * def main(): service=s ...

  4. Linux系统——磁盘管理

    磁盘结构 (1)硬盘的物理结构 磁头:每面一个磁盘 盘片:硬盘有多个盘片,每个盘片2面 (2)硬盘的数据结构 扇区:盘片被分为多个扇形区域,每个扇形区存放512字节的数据 磁道:统一盘片不同半径的同心 ...

  5. ruby中的顶层方法

    在ruby中写顶层函数的时候,总会有一个问题,self是谁,这些方法是谁的,是什么方法. 如下: p self p self.class def talk p self end talk 输出main ...

  6. 机器学习实战python3 决策树ID3

    代码及数据:https://github.com/zle1992/MachineLearningInAction 决策树 优点:计算复杂度不高,输出结果易于理解,对中间值的缺失不敏感,可以处理不相关特 ...

  7. Problem A. Array Factory XVII Open Cup named after E.V. Pankratiev Stage 4: Grand Prix of SPb, Sunday, Octorber 9, 2016

    思路: 直接二分长度不可行,因为有负数. 考虑枚举坐便删l个数,那如果可以在短时间内求出符合条件的右边最小删的数的个数,这题便可做了. 即:当左边删l个数时,要使sum[n]-sum[l]-fsum[ ...

  8. Spring-1-A Post Robot（HDU 5007）解题报告及测试数据

    Post Robot Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K Problem Description ...

  9. LeetCode 7. Reverse Integer 一个整数倒叙输出

    潜在问题:(1)随着求和可能精度会溢出int 范围,需要使用long 来辅助判断是否溢出,此时返回 0 Assume we are dealing with an environment which ...

  10. IOS开发-数据库总结

    关于数据存储概念: 数据结构: 基本对象:NSDictionary.NSArray和NSSet这些对象. 复杂对象:关系模型.对象图和属性列表多种结构等. 存储方式: 内存:内存存储是临时的,运行时有 ...