連續點擊提示效果css

.btn {
position: relative;
display: inline-block;
padding: 10px 20px;
background-color: #f5f5f5;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.btn:hover {
background-color: #ddd;
}
.btn:active {
transform: translateY(2px);
}
.btn:active:after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgba(200, 200, 200, 0.5);
z-index: -1;
transform: translate(-50%, -50%) scale(0.5);
}
? ?.btn:active:after {
 ? ? ?transform: translate(-50%, -50%) scale(5);
opacity: 0;
transition: all 0.5s ease;
}

上面的css代碼可以實現在按鈕上連續點擊時有提示效果，即按鈕內部出現波紋擴散的效果。通過:hover和:active偽類的使用可以使按鈕外觀有所變化，并通過transform屬性實現點擊時的微小位移。

其中關鍵的是通過:after偽元素的添加來實現波紋擴散效果。需要注意的是，用:before和:after添加的偽元素默認情況下不會覆蓋實際內容（即按鈕文本），需要用z-index負值降低其層級來避免出現覆蓋。

同時，需要在:active狀態下才能使波紋擴散出現，因為只有在用戶實際點擊按鈕時才有意義，而在:hover狀態下只是鼠標懸浮在按鈕上，不會產生波紋效果。