<!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. Pycharm建立web2py项目并简单连接MySQL数据库

    引言 web2py是一种免费的,开源的web开发框架,用于敏捷地开发安全的,数据库驱动的web应用:web2p采用Python语言编写,并且可以使用Python编程.web2py是一个完整的堆栈框架, ...

  2. Java集合—List(转载)

    本篇文章将集中介绍了List集合相比Collection接口增加的一些重要功能以及List集合的两个重要子类ArrayList及LinkedList. 一.List集合 List作为Collectio ...

  3. java 多线程 day11 lock

    import java.util.concurrent.locks.Lock;import java.util.concurrent.locks.ReentrantLock; /** * Create ...

  4. java堆结构和垃圾回收

    JVM内存结构和垃圾回收一.JVM垃圾收集算法1.引用计数算法 每个对象有一个引用计数属性,新增一个引用时计数加1,引用释放时计数减1,计数为0时可以回收. 此方法简单,无法解决对象互相循环引用的问题 ...

  5. Ubuntu16.04系统Python3相关环境或模块安装

    前提:一般用户安装都命令前都需要sudo ,或者在root用户下 1.Ubuntu 16.04 安装PyCharm Ubuntu 16.04 安装PyCharm 本文通过第三方源安装PyCharm,好 ...

  6. HTML DOM setInterval() 方法

    定义和用法 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被 ...

  7. 在python3下对数据分块(8x8大小)使用OpenCV的离散余弦变换DCT

    在MATLAB中有blkproc (blockproc)对数据处理, 在python下没找到对应的Function, 这里利用numpy 的split(hsplit和vsplit) 对数据分块处理成8 ...

  8. Java学习第一周博客

    20145307<Java程序设计>第一周学习总结 教材学习内容总结 首先学习安装Java有两种方法,一种是用Eclipse直接编辑输出,另一种方法是用记事本之后用win+G开启cmd运行 ...

  9. 20145109 实验四 Andoid开发基础

    安装Android 打开 默认程序中有helloworld 按下下图红框中的键: 遇到问题: 方法:修改build.gradle

  10. 关于C++中的string的小知识点

    这是GCC版本5.x的情况下的分析,在GCC版本4.x的情况下std::string的内存布局将不同.逆向C++的过程中经常遇到std::string,它在内存中的状态是什么样呢?我先简单地写了一个程 ...