CSS擴散按鈕是一種非常流行的按鈕樣式，它通過一種特殊的方式來展示按鈕的點擊效果，讓用戶感受到更加生動的互動體驗。在本文中，我們將介紹如何使用CSS來創建這種擴散按鈕。

首先，讓我們來看一下如何創建按鈕。我們需要在HTML中添加一個按鈕元素，如下所示：

<button class="my-button">Click Me</button>

這里我們為按鈕添加了一個類名為“my-button”，方便我們在CSS中進行樣式的定義。接下來，讓我們來為這個按鈕添加基本的樣式。

.my-button {
position: relative;
display: inline-block;
padding: 15px 30px;
font-size: 18px;
font-weight: bold;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

這里我們為按鈕添加了一些基本樣式，如padding、font-size、font-weight、background-color等，使其更加美觀。接下來，讓我們來實現擴散效果。

.my-button::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0px;
height: 0px;
background-color: rgba(255,255,255,0.5);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.5s ease-out;
z-index: -1;
}
.my-button:hover::before {
width: 200px;
height: 200px;
}

這里我們使用了::before偽元素來創建一個圓形的效果，然后在:hover的狀態下讓其擴散開來。這里我們采用了CSS3中的transition屬性，使其擴散具有過渡效果，從而增加用戶體驗。另外，我們使用了z-index屬性來保證圓圈在按鈕下面，從而不影響按鈕的觸摸效果。

到此為止，我們已經成功地實現了擴散按鈕的效果。通過這種方式，我們可以為我們的網頁添加更加生動的效果，從而增加用戶粘性。同時，這種效果也提高了網頁的美觀程度，從而提高了網頁的質量。