使用CSS制作按鈕按下去的效果, 可以使使用者在交互上更加舒適，對視覺效果也有所提升。 一、CSS按鈕按下去的樣式 在CSS中制作按鈕按下去的樣式, 我們可以通過:hover以及:active這兩個偽類來實現。 當鼠標指針懸浮在按鈕上時，我們可以通過:hover來改變按鈕的樣式, 當然在鼠標點擊按鈕時，通過:active來改變按鈕的樣式。 下面是一段示例代碼, 演示CSS按鈕的按下效果:

button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
}
button:active {
background-color: #AED6F1;
}

此段樣式代碼展示一個基本的綠色按鈕，當鼠標懸浮在其上方時，則會變為深綠色，也可在鼠標點擊按鈕時變為淺藍色。 二、CSS按鈕按下去的效果 - 動畫 除了改變顏色外, 我們也可以通過動畫來讓按鈕按下去的效果更顯著。 示例代碼：

button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
}
button:active {
background-color: #AED6F1;
box-shadow: 0 5px #666;
transform: translateY(4px);
}

當按鈕被點擊時, 陰影效果可以使按鈕顯得更立體，同時通過transform: translateY(4px)來將按鈕下移4像素, 形成按鈕按下去的效果。 結論 CSS按鈕按下去的樣式，不僅可以錦上添花，也可以讓用戶獲取更好的使用體驗，通過其細節方面的調整，可以大大提升頁面的整體美感和交互效果。