转自:https:
//blog.csdn.net/FE_dev/article/details/72765447实现几个有关按钮的特效
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>白光特效</title>
<style>
a{
margin:30px auto 0;
}
.animBtn{
width:150px;
height:40px;
position:relative;
border:2px solid #000;
background:transparent; /* 背景色为透明色,让生成的背景能显示出来 这里可以随便换颜色*/
display:block; /* 将元素变为块级元素 */
line-height:40px;
text-align:center;
text-decoration: none; /* 标准的文本,没有文本装饰,主要是取消a标签的下划线 */
text-transform: uppercase; /* 元素中的文本全部转为大写 */
overflow: hidden;
transition:.3s ease;
}
.animBtn:after{
content:"";
position:absolute;
width:100%;
height:0%;
background:green;
left:50%;
top:50%;
transition: all .3s ease 0s;
z-index: -1; /* 取负值,置于底层 用来当做背景 */
}
.animBtn:hover{
color:#fff;
text-shadow:7px 7px 2px #646464;
background: transparent; /*如果你想让生成的元素显示出来,而且上面你用的不是透明色,记得这里换透明色*/
line-height:34px;
border-color:green;
}
/* 上下开 */
.animBtn.btnA:after {
transform: translateX(-50%) translateY(-50%);
}
/* 匹配鼠标悬停在元素上时,在元素之后插入的内容 */
.animBtn.btnA:hover:after {
height: 100%;
}
/* 左右开 */
.animBtn.btnB:after {
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
/* 匹配鼠标悬停在元素上时,在元素之后插入的内容 */
.animBtn.btnB:hover:after,.animBtn.btnC:hover:after {
height: 400%;
}
/* 左右倾斜角不同 */
.animBtn.btnC:after {
transform: translateX(-50%) translateY(-50%)rotate(-45deg);
}
/* 圆形开 */
.animBtn.btnD:after {
width: 0%;
border-radius: 50%;
transform: translateX(-50%) translateY(-50%);
}
/* 匹配鼠标悬停在元素上时,在元素之后插入的内容 */
.animBtn.btnD:hover:after {
height: 500%;
width:110%;
}
</style>
</head>
<body>
<a href="#" class="animBtn btnA">button a</a>
<a href="#" class="animBtn btnB">button b</a>
<a href="#" class="animBtn btnC">button c</a>
<a href="#" class="animBtn btnD">button d</a>
</body>
</html>