css3點選按鈕的波紋效果
阿新 • • 發佈:2021-01-27
效果
程式碼
<div>
<button class="btn">點選</button>
</div>
<style>
.btn {
position: relative;
overflow: hidden;
background-color: #000;
border: 1px solid #00ffff;
color: #fff;
padding: 4px 10px;
outline: none;
}
.btn:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform : scale(10, 10);
opacity: 0;
transition: transform 0.3s, opacity 0.5s;
}
.btn:active:after {
transform: scale(0, 0);
opacity: 0.6;
transition: 0s;
}
</style>