# 动态button效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
/*基础样式*/
*,*:after,*:before{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
h1{
text-align:center;
margin:100px 0;
}
.box{
display:block;
position:relative;
margin:30px 0;
text-align:center;
}
/*去掉浏览器默认样式*/
button{
border:none;
color:inherit;
background:none;/*原button的背景去掉*/
outline:none;
appearance:none;
-webkit-appearance:none;
cursor:pointer;
}
.button{
/*button的大小和位置*/
position:relative;
display:inline-block;
z-index:1;
min-width:150px;
max-width:250px;
margin:1em;
padding:1em 2em;
overflow:hidden;/*隐藏超出按钮范围的(隐藏after、before用)*/
vertical-align:middle;/*vertical-align 属性设置元素的垂直对齐方式。图片在文字中的对齐*/
/*3D旋转时不显示背面*/
backface-visibility:hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility: hidden;
/*颜色过渡设置*/
transition:color 0.3s cubic-bezier(0.75, 0, 0.125, 1);
-webkit-transition:color 0.3s cubic-bezier(0.75, 0, 0.125, 1);
-moz-transition:color 0.3s cubic-bezier(0.75, 0, 0.125, 1);
-ms-transition:color 0.3s cubic-bezier(0.75, 0, 0.125, 1);
}
.button:before,
.button:after{
content:'';
position:absolute;
z-index:-1;/*两个伪元素都在button和span的下面，因此不会覆盖button里的span*/
border-radius:inherit;/*圆角和父元素相同*/
/*伪元素运动过渡设置，所有动画都是0.3秒，符合特定贝塞尔曲线过渡*/
transition:all 0.3s cubic-bezier(.75, 0, .125, 1);
-webkit-transition:all 0.3s cubic-bezier(.75, 0, .125, 1);
-moz-transition:all 0.3s cubic-bezier(.75, 0, .125, 1);
-ms-transition:all 0.3s cubic-bezier(.75, 0, .125, 1);
}
.button>span{
vertical-align:middle;
}
/****button-quidel***/
.button-quidel{
color:#fff;
}
/*鼠标经过字体颜色变化*/
.button-quidel:hover{
color:#7986cb;
}
/*在button中间，与旁边有2px的距离，作为button的背景色*/
.button-quidel:after{
background: #37474f;
top:2px;
right:2px;
left:2px;
bottom:2px;
}
.button-quidel:before{
top:0;
left:0;
width:100%;
height:100%;/*大小为原来button的大小*/
background:#7986cb;/*背景色就是我们想要的button的边框色*/
/*移动到button的正下方，因为button的overflow为hidden,所以看不见*/
transform:translate3d(0, 100%, 0);
-webkit-transform:translate3d(0, 100%, 0);
-moz-transform:translate3d(0, 100%, 0);
-ms-transform:translate3d(0, 100%, 0);
}
/*鼠标经过回到原来的位置*/
.button-quidel:hover:before{
transform:translate3d(0, 0, 0);
-webkit-transform:translate3d(0, 0, 0);
-moz-transform:translate3d(0, 0, 0);
-ms-transform:translate3d(0, 0, 0);
}
/****button-antiman***/
.button-antiman{
color:#fff;
border-radius:4px;
}
/*字体颜色变化*/
.button-antiman:hover{
color:#3f51b5;
}
.button-antiman:after,
.button-antiman:before{
top:0;
left:0;
width:100%;
height:100%;
border-radius:inherit;
}
.button-antiman:before{
border:2px solid #3f51b5;
background-color:#fff;
opacity:0;
transform:scale3d(1.2, 1.2, 1);
-webkit-transform:scale3d(1.2, 1.2, 1);
-moz-transform:scale3d(1.2, 1.2, 1);
-ms-transform:scale3d(1.2, 1.2, 1);
}
/*before缩小到button的大小.透明度变成1，before的边框显现出来，*/
.button-antiman:hover:before{
opacity:1;
transform:scale3d(1, 1, 1);
-webkit-transform:scale3d(1, 1, 1);
-moz-transform:scale3d(1, 1, 1);
-ms-transform:scale3d(1, 1, 1);
}
.button-antiman:after{
background:#3f51b5;
}
/*after在0.3秒内缩小到原来的0.8倍和完全变成透明*/
.button-antiman:hover:after{
opacity:0;
transform:scale3d(0.8, 0.8, 1);
-webkit-transform:scale3d(0.8, 0.8, 1);
-moz-transform:scale3d(0.8, 0.8, 1);
-ms-transform:scale3d(0.8, 0.8, 1);
}
</style>
</head>
<body>
<!--边框和字体颜色逐步填充-->
<section>
<h1>利用伪元素（after,before）实现button效果</h1>
<div class="box">
<button class="button button-quidel">
<span>UpDown</span>
</button>
<button class="button button-antiman">
<span>OutIn</span>
</button>
</div>
</section>
</body>
</html>