【CSS】按钮特效

通过伪元素实现下图效果

HTML代码

<a href="#">RABBIT</a>

CSS代码

body {    background: #353535;
}a {    width: 200px;    display: block;    position: relative;    border: 2px solid #D24D57;    margin: 40px auto;    padding: 14px 16px;    font-size: 20px;    color: #fff;    text-align: center;    text-decoration: none;    overflow: hidden;
}a:after {    content: '';    display: block;    position: absolute;    width: 100%;    height: 0%;    left: 50%;    top: 50%;    z-index: -1;    background: #D24D57;    transform: translateX(-50%) translateY(-50%) rotate(-25deg);    -webkit-transition: all 0.75s ease 0s;    -moz-transition: all 0.75s ease 0s;    -o-transition: all 0.75s ease 0s;    transition: all 0.75s ease 0s;
}a:hover:after {    height: 300%;
}

想要从中间开始扩张开来，需要伪元素设置position: absolute;

然后把top和left都设置成50%，再通过transform的translate设置回-50%。
这个作用是让元素从中心开始发生改变（如果要做改变的话）。

transform: rotate(-25deg)的作用是把伪元素旋转-25度，这样就有倾斜效果了。

最后记得设置伪元素z-index: -1;
这个值的作用是不让伪元素遮住文字层。

a:hover:after {    height: 300%;
}

当鼠标经过<a>标签时，伪元素的高度发生改变。

作者：滑滑兔
链接：https://www.jianshu.com/p/95bb64eacdbc