阿里云水波紋按鈕CSS是一種實現讓按鈕點擊時產生水波紋效果的CSS技術。

實現這種效果需要使用CSS3的偽元素before和after，同時還需要使用CSS的transition屬性來實現過渡效果。

.ripple-button{
position:relative;
overflow:hidden;
display: inline-block;
padding: 12px 24px;
color: #fff;
text-decoration:none;
background-color: #42b983;
border-radius: 4px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
cursor: pointer;
}
.ripple-button:before,
.ripple-button:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
animation: ripple 0.8s linear;
transform-origin: center center;
opacity: 0;
pointer-events: none;
}
.ripple-button:active:before {
animation-delay: -0.5s;
}
.ripple-button:active:after {
animation-delay: -0.2s;
}
@keyframes ripple {
to {
transform: scale(2.5);
opacity: 0;
}
}

上面的CSS代碼是實現阿里云水波紋按鈕效果所使用的主要代碼，其中通過設置按鈕的偽元素before和after的動畫效果實現水波紋效果。同時在按鈕點擊時通過active來觸發動畫效果的延遲。

阿里云水波紋按鈕CSS技術為網頁設計帶來更為生動的交互體驗，給用戶帶來更好的感受和體驗。