CSS 按鈕是網(wǎng)頁設(shè)計中常用的元素之一，可以使網(wǎng)頁更加美觀和交互性更高。其中，鼠標(biāo)滑過變色效果是一個非常常見的樣式。以下是一個用 CSS 實(shí)現(xiàn)鼠標(biāo)滑過變色效果的案例。

/* CSS代碼 */
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
text-align: center;
font-size: 16px;
border: none;
cursor: pointer;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #3e8e41;
}

在以上代碼中，我們首先定義了一個名為 ".btn" 的 CSS 類，來描述我們想要在網(wǎng)頁中添加的按鈕元素。我們使用了 display 屬性將按鈕元素轉(zhuǎn)化為行內(nèi)塊級元素，方便我們設(shè)置元素的寬高等樣式。為了讓按鈕具有點(diǎn)擊效果，我們將光標(biāo)指針樣式設(shè)置為 pointer，這樣當(dāng)用戶將光標(biāo)移動到按鈕上時，光標(biāo)會變成手形，提示用戶該區(qū)域可以進(jìn)行點(diǎn)擊。我們也使用了 transition 屬性來指定鼠標(biāo)滑過時顏色變化的動畫效果。

而當(dāng)用戶將光標(biāo)移動到按鈕上方時，我們再設(shè)置了一個 ".btn:hover" 的 CSS 類，將按鈕的背景顏色更改為另一種顏色，從而實(shí)現(xiàn)鼠標(biāo)滑過變色的效果。這里的實(shí)現(xiàn)方式是把:hover偽類作為 CSS 類名中的一部分，應(yīng)用于與之匹配的 HTML 元素上。

我們可以根據(jù)實(shí)際需求，對以上代碼進(jìn)行修改，來實(shí)現(xiàn)不同的按鈕樣式和顯示效果。例如，我們可以更改背景顏色、文字顏色、按鈕尺寸等等，來滿足不同的設(shè)計要求。同時，也可以結(jié)合 JavaScript，來實(shí)現(xiàn)更加交互性高的按鈕效果。