两种利用:before实现的特效按钮

button.gif

效果图还行吧，实现起来也不困难，都是一些基础的东西，用a标签来做按钮

html

    发射
            
    旋转
            

css

外部容器一个相对定位

.container{
        width: 400px;
        height: 400px;
        border: 5px solid #1E90FF;
        border-radius: 10px 0 10px 0;
        margin: 10px auto;
        position: relative;
        }

第一个按钮的样式

.btn-mask{
        text-decoration: none;
        position: absolute;
        display: block;
        line-height: 40px;
        left: 50px;
        top: 50px;
        width: 100px;
        height: 40px;
        text-align: center;
        background-color: #EEEEEE;
        color: #333333;
        overflow: hidden;
    }
.btn-mask:before{
        transition: top 0.2s linear;
        display: block;
        position: absolute;
        content: "";
        background-color: rgba(0,0,0,0.1);
        width: 100%;
        height: 100%;
        top: -100%;
            }
.btn-mask:hover:before{
        top: 0;
}

主要是利用before元素做成一个有透明度的蒙层，然后控制top在按钮上方，hover的时候更改高度
#######！需要注意的transition效果的使用位置

---

第二个按钮就涉及到一个很容易被忽视的css属性clip

参考：http://www.zhangxinxu.com/wordpress/2011/04/css-clip-rect/
我理解的就是参数的起始都是以top,left为标准
例如clip:rect(0,100px,15px,0);
假设是一个100 * 100d的div盒子
里面参数的顺序还是按照顺时针，上，右，下，左
就是第二个参数100px就表示从左边开始100px的位置开始裁剪，而15px则是以top为起始位置15px的位置开始裁剪，直到bottom,而上，左参数则是只要有多少像素就从0开始裁剪多少像素

---

.btn-clip{
        width: 90px;
        height: 30px;
        position: absolute;
        left: 55px;
        top: 160px;
        text-align: center;
        text-decoration: none;
        line-height: 30px;
        background-color: #CD5C5C;
                
}
/*pseudo 虚伪的，假的  */
.btn-clip:before{
        content: "";
        width: 94px;
        height: 34px;
        position: absolute;
        left: 0px;
        top: 0px;
                
        margin-left: -5px;
        margin-top: -5px;
        border: 3px solid #FF0000;
        /*box-sizing: border-box;*/
        animation: clip_rotate 1.5s linear infinite;
}
@keyframes clip_rotate{
        0%,100%{clip: rect(0,100px,3px,0);}
        25%{clip: rect(0,100px,40px,97px);}
        50%{clip: rect(37px,100px,40px,0);}
        75%{clip: rect(0,3px,40px,0);}
}

还有一点很容易错，别忘记给before,after加上content