CSS按鈕鼠標(biāo)懸浮特效

.btn {
display: inline-block; /*將按鈕設(shè)為行內(nèi)塊級(jí)元素*/
padding: 10px 20px; /*設(shè)置按鈕內(nèi)邊距*/
text-align: center; /*設(shè)置文本居中*/
border: none; /*將邊框設(shè)為無(wú)*/
cursor: pointer; /*設(shè)置鼠標(biāo)指針的樣式為手型*/
color: #ffffff; /*設(shè)置字體顏色*/
background: #4a4a4a; /*設(shè)置按鈕背景色*/
transition: all 0.3s ease; /*設(shè)置過(guò)渡效果*/
}
.btn:hover {
background: #8c8c8c; /*當(dāng)鼠標(biāo)懸浮在按鈕上時(shí)，改變背景色*/
}
.btn:active {
transform: translateY(2px); /*當(dāng)按下按鈕時(shí)，將按鈕向下移動(dòng)2px*/
}

解釋：

上面的代碼是CSS按鈕鼠標(biāo)懸浮特效的實(shí)現(xiàn)方法。首先，將按鈕設(shè)為行內(nèi)塊級(jí)元素，并設(shè)置內(nèi)邊距和文本居中，讓按鈕看起來(lái)更美觀。然后，將邊框設(shè)為無(wú)，并將鼠標(biāo)指針的樣式設(shè)為手型，讓按鈕具有交互性。接著，設(shè)置字體顏色和背景顏色，同時(shí)添加過(guò)渡效果，當(dāng)鼠標(biāo)懸浮在按鈕上時(shí)，背景色會(huì)漸變改變。最后，當(dāng)按下按鈕時(shí)，將按鈕向下移動(dòng)2px，制造視覺(jué)效果。

這種CSS按鈕鼠標(biāo)懸浮特效可以讓網(wǎng)頁(yè)變得更加生動(dòng)，用戶體驗(yàn)更好。