在網(wǎng)頁設(shè)計(jì)中，按鈕是非常重要的元素之一。為按鈕設(shè)置移動(dòng)效果可以使網(wǎng)頁更加生動(dòng)、有趣。本文將介紹如何使用CSS來設(shè)置按鈕移動(dòng)效果。

/* 定義按鈕的樣式 */
.button {
display: inline-block;
padding: 10px 20px;
background-color: #3f51b5;
color: white;
font-size: 16px;
border-radius: 5px;
}
/* 設(shè)置按鈕移動(dòng)效果 */
.button:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
/* 設(shè)置按鈕點(diǎn)擊效果 */
.button:active {
transform: translateY(0);
box-shadow: none;
}

上述CSS代碼定義了按鈕的樣式，并為按鈕設(shè)置移動(dòng)效果和點(diǎn)擊效果。在:hover偽類下，使用transform屬性來設(shè)置按鈕向上移動(dòng)5個(gè)像素，同時(shí)使用box-shadow屬性為按鈕增加一個(gè)陰影效果，使按鈕更加立體。

在:active偽類下，調(diào)用transform屬性將按鈕恢復(fù)原位，并取消陰影效果。通過設(shè)置:hover和:active偽類，可以使按鈕在鼠標(biāo)懸停和點(diǎn)擊時(shí)產(chǎn)生動(dòng)態(tài)效果，提升用戶體驗(yàn)。