CSS的按鈕凸起效果是一種常見(jiàn)的網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格，它可以增加按下按鈕時(shí)的反饋感，讓用戶(hù)感到更加舒適。下面我們可以通過(guò)CSS給按鈕添加凸起效果。

button {
background-color: #2c3e50;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
transition: all 0.2s;
}
button:hover {
transform: translateY(-2px);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}

從代碼中可以看出，我們給按鈕添加了一個(gè)陰影效果，并設(shè)置了按鈕在鼠標(biāo)經(jīng)過(guò)時(shí)的樣式。transform屬性可以讓按鈕在鼠標(biāo)經(jīng)過(guò)時(shí)向上移動(dòng)一點(diǎn)，模擬凸起的效果。box-shadow屬性可以在按鈕周?chē)砑右蝗﹃幱靶Ч?，增加凸起的立體感。transition屬性可以讓按鈕的樣式變化平滑過(guò)渡，讓用戶(hù)感到自然流暢。

CSS的按鈕凸起效果可以使網(wǎng)頁(yè)設(shè)計(jì)更加生動(dòng)有趣，增加用戶(hù)的互動(dòng)感受。通過(guò)簡(jiǎn)單的CSS代碼，我們就可以輕松實(shí)現(xiàn)這種設(shè)計(jì)效果，讓網(wǎng)頁(yè)變得更加引人注目。