写一个按钮波纹效果的css
时间: 2023-11-18 21:31:01 浏览: 23
button {
position: relative;
display: inline-block;
padding: 10px 20px;
font-size: 18px;
color: #fff;
background-color: #2196f3;
border: none;
outline: none;
cursor: pointer;
}
button:hover {
background-color: #0d8bf5;
}
button:focus {
outline: none;
}
button:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 100%;
opacity: 0;
}
button:active:after {
width: 200px;
height: 200px;
opacity: 1;
animation: ripple 1s ease-out forwards;
}
@keyframes ripple {
to {
transform: translate(-50%, -50%) scale(10);
opacity: 0;
}
}