【CSS】按钮特效 - 3

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;    border: 3px solid #D24D57;    transform: translateX(-50%) translateY(-50%);    -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: 150%;    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;    border: 3px solid #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;
}

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;    border: 3px solid #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%;    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-image: linear-gradient( transparent 50%, rgba(210,77,87,0.2) 50%);    background-size: 10px 10px;    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%;    opacity: 1;
}

最后两个效果的做法也是一样的，只是改变了一下角度而已。

作者：滑滑兔
链接：https://www.jianshu.com/p/4bd0afb3ce9e