css button按钮点击或者划过背景色填充
不会录制动图反正就是这个意思
下面是html
<a class="btn" href="#">
<span></span>
</a>
css
.btn:active {
background: #6a468e;
}
.btn{
position: relative;
display: block;
margin: 20px auto;
width: 100%;
height: 80px;
max-width: 250px;
text-transform: uppercase;
overflow: hidden;
border: 1px solid currentColor;
}
a {
text-decoration: none;
line-height: 80px;
color: black;
}
.btn:hover span {
width: 562.5px;
height: 562.5px;
}
.btn span {
position: absolute;
display: block;
width: 0;
height: 0;
border-radius: 50%;
background: #402a55;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: width 0.6s, height 0.6s;
transition: width 0.6s, height 0.6s;
z-index: -1;
}
我这个是hover效果的