CSS中，按鈕凹凸效果是一種常見(jiàn)的設(shè)計(jì)技巧，可以提高按鈕的立體感和視覺(jué)層次感。下面就讓我們來(lái)學(xué)習(xí)一下實(shí)現(xiàn)按鈕凹凸效果的方法。

.button {
display: inline-block;
padding: 10px 20px;
text-decoration: none;
font-size: 16px;
font-weight: bold;
color: #fff;
background-color: #333; 
border: none;
border-radius: 5px;
box-shadow: 0px 5px 0px #1a1a1a; 
}
.button:active {
box-shadow: 0px 2px 0px #1a1a1a; 
transform: translateY(3px); 
}

上面的代碼使用了box-shadow屬性和transform屬性來(lái)實(shí)現(xiàn)按鈕的凹凸效果。當(dāng)按鈕被點(diǎn)擊時(shí)，box-shadow的垂直偏移量由5px變?yōu)?px，使按鈕的底部產(chǎn)生一個(gè)小小的凹陷。同時(shí)使用translateY屬性向下移動(dòng)了3px，讓按鈕整體下沉，產(chǎn)生更真實(shí)的立體感。

通過(guò)對(duì)box-shadow和transform屬性的細(xì)致調(diào)整，還可以實(shí)現(xiàn)更多不同的凹凸效果。如果你也想讓自己的按鈕更具立體感，不妨嘗試一下這種技巧吧。