【CSS】按钮特效 - 2

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%;
}

---

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;    opacity: 0;    width: 100%;    height: 0%;    left: 50%;    top: 50%;    z-index: -1;    background: #D24D57;    transform: translateX(-50%) translateY(-50%) rotate(0deg);    -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%;    opacity: 1;
}

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;    opacity: 0;    width: 100%;    height: 0%;    left: 50%;    top: 50%;    z-index: -1;    background: #D24D57;    transform: translateX(-50%) translateY(-50%) rotate(90deg);    -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: 450%;    opacity: 1;
}

作者：滑滑兔
链接：https://www.jianshu.com/p/42b56e4c373c