【CSS】按钮特效

微信订阅号：rabbit_svip

微信订阅号：rabbit_svip

通过伪元素实现下图效果

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>标签时，伪元素的高度发生改变。

---

HTML与CSS 目录：HTML与CSS

上一篇：【CSS】图片动画特效（相框）