按鈕效果是網(wǎng)頁設(shè)計的一個重要組成部分。CSS提供了多種按鈕效果，可以幫助設(shè)計師更好地實現(xiàn)自己的設(shè)計。

.button{
display: inline-block; /*使按鈕可以設(shè)置寬高*/
padding: 10px 20px; /*設(shè)置文字與邊框的內(nèi)邊距*/
border: none; /*去除默認的邊框*/
border-radius: 5px; /*設(shè)置圓角*/
background-color: #2ecc71; /*設(shè)置背景顏色*/
color: #fff; /*設(shè)置字體顏色*/
font-size: 16px; /*設(shè)置字體大小*/
box-shadow: 0px 4px 0px #27ae60; /*添加陰影效果*/
}
.button:hover{
background-color: #27ae60; /*鼠標移入時改變背景顏色*/
box-shadow: 0px 2px 0px #27ae60; /*鼠標移入時改變陰影效果*/
}
.button:active{
background-color: #218c74; /*鼠標按下時改變背景顏色*/
box-shadow: none; /*去除鼠標按下時的陰影效果*/
transform: translateY(4px); /*使按鈕向下移動4px*/
}

上述代碼實現(xiàn)了一個簡單的綠色按鈕，包括背景顏色、字體顏色、陰影效果等。當鼠標移入按鈕時，背景顏色和陰影效果都會有微小的變化。當鼠標按下按鈕時，背景顏色會變?yōu)樯罹G色，同時按鈕會向下移動4px。

CSS提供了豐富的按鈕效果，可以根據(jù)實際需要靈活運用。按鈕樣式的設(shè)計不僅能夠美化頁面，還可以提高用戶體驗和用戶的點擊率。