css鼠标滑过按钮出现flash闪光效果
html代码如下
这是一个按钮
css代码如下
查看代码
.btn-home{
position: relative;
background-color: #fa5e2e;
border: 1px solid #fa5e2e;
height: 44px;
width: 250px;
text-align: center;
line-height: 44px;
color: #FFF;
letter-spacing: 0.5px;
}
.btn-home:hover {
background-color: #ec6a42
}
.btn-home:hover .line:after {
transform: skewX(-45deg) translateX(25em);
transition: all 1s ease;
}
.btn-home .line:after {
content: "";
background-color: hsla(0,0%,100%,.4);
height: 44px;
width: 3em;
display: block;
position: absolute;
bottom: 0;
left: -40%;
transform: skewX(-45deg) translateX(0);
transition: none;
}
其他网站效果地址演示:https://www.html5tricks.com/css3-hover-shine-button.html