CSS3水波紋擴散效果是一種常見的網頁設計效果，可以讓頁面看起來更加動感和時尚。實現這種效果的方法有很多，比如使用html5的canvas標簽、使用JavaScript的庫或插件等等。這篇文章將介紹如何使用CSS3來實現水波紋擴散效果。

/* CSS樣式代碼 */
.btn{
display: inline-block;
position: relative;
padding: 15px 30px;
color: #fff;
font-size: 18px;
background-color: #3498db;
border-radius: 4px;
overflow: hidden;
}
.btn:hover:before{
opacity:1;
transform: scale(3);
}
.btn:before{
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
background: radial-gradient(circle at center, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 10%, rgba(255,255,255,0.3) 30%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.2) 70%, rgba(255,255,255,0) 100%);
width: 200px;
height: 200px;
border-radius: 50%;
transition: all 0.8s ease-out;
z-index: -1;
opacity: 0;
}

以上代碼中，我們使用偽元素::before來創建水波紋效果的視覺效果。當鼠標懸停在按鈕上時（即`.btn:hover:before`），偽元素出現，并通過給width、height、opacity等屬性設置不同的值，讓其呈現出擴散的效果。

要注意的是，在偽元素里使用`pointer-events:none;`來防止水波紋影響按鈕的點擊事件。

總結來說，CSS3水波紋擴散效果是一種簡單易用的網頁設計技巧，我們可以通過使用偽元素和一些基本的CSS樣式，來輕松地實現這種令人喜歡的效果。