标签：
两个效果，一个是从无到有循序渐进的下划线效果；一个是谷歌扁平化按钮点击填充效果--简单粗暴易上手
下划线的很简单：就是before结合hover，配合transition过度来实现从无到有的渐进过程；为什么需要两个transtion过渡，因为我们要考虑脱离hover状态，也需要渐进回收，这样看起来才比较舒适。。
MD按钮(active): 这个效果是我看到我手机上（S7 EDGE）设置有这个效果，就突然想试试用CSS3能不能写； 这里涉及到的知识点有【居中，层级的先后，以及圆角的配合过渡】。。。相对上面，也就复杂一丢丢；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循序渐进的下划线及MD按钮效果</title>
<style type="text/css">
/* 演示容器 */
.wrapper {
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-width: 800px;
height: 100px;
margin: 0 auto;
text-align: center;
}
/* 操纵before结合hover实现循序渐进的下划线 */
.fadeIn-underlinie {
text-decoration: none;
color: #333;
font-size: 40px;
position: relative;
padding: 5px;
}
.fadeIn-underlinie::before {
content: ‘‘;
position: absolute;
bottom: -3px;
left: 0;
height: 3px;
background-color: #5D1DF1;
width: 0;
-webkit-transition: width 0.2s linear;
transition: width 0.2s linear;
}
.fadeIn-underlinie:hover::before {
width: 100%;
-webkit-transition: width 0.2s linear;
transition: width 0.2s linear;
}
/* 实现类似material按钮长按填满的效果 */
.active-fillmode {
text-decoration: none;
color: #333;
font-size: 40px;
position: relative;
padding: 5px 50px;
}
.active-fillmode::before{
content: ‘‘;
position: absolute;
left: 50%;
top: 50%;
border-radius: 10%/30%;
-webkit-transform: translate(-50%, -50%) ;
transform: translate(-50%, -50%) ;
height: 100%;
width: 0;
z-index: -1;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.active-fillmode:active{
background: rgba(217,216,216,.65);
}
.active-fillmode:active::before{
width: 100%;
height: 100%;
border-radius: 0;
background: rgba(217,216,216,.95);
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
</style>
</head>
<body>
<div class="wrapper">
<h1>这是一个需要循序渐进的下划线</h1>
<a href="javascript:;" class="fadeIn-underlinie">fadeIn undeline</a>
</div>
<div class="wrapper">
<h1>这是一个需要点击填充，类似MD按钮的效果</h1>
<a href="javascript:;" class="active-fillmode">Material Button Active effect Emulate</a>
</div>
</body>
</html>
心血来潮搞起就搞起了。。实现起来很简单；
此处的效果都是PC上的。若是要考虑移动端的话，hover应该为active才能看到效果，毕竟手机并木有hover；
CSS3:实现一个循序渐进的下划线和一个Material Button【No JS】
标签：
原文地址：http://blog.csdn.net/crper/article/details/52295940
