CSS按鈕按下彈起動畫是一種常見的網頁設計效果，可以使網頁變得更加生動有趣，下面就讓我們來學習一下如何使用CSS實現按鈕按下彈起動畫吧！
首先，我們需要定義按鈕的CSS樣式，使用pre標簽包裹代碼，方便展示。

.btn {
padding: 10px 20px;
border: none;
outline: none;
color: #fff;
background-color: #4CAF50;
cursor: pointer;
transition: all 0.3s ease;
}
.btn:active {
transform: translateY(2px);
}

其中：
1.padding: 設置按鈕內邊距，左右為10px，上下為20px；
2.border: 按鈕無邊框；
3.outline: 按鈕無外邊框；
4.color: 設置按鈕文字顏色為白色；
5.background-color: 設置按鈕背景色為#4CAF50；
6.cursor: 鼠標懸停于按鈕上時，光標會變成手型；
7.transition: 設置過渡效果，在0.3秒內完成過渡；
8.:active: 當按鈕被按下時，應用其樣式變化，此處設置按鈕向下移動2像素。

接下來，為了使按鈕在按下時能夠產生彈起的動畫效果，我們需要再次設置樣式。這里我們使用pre標簽展示所需代碼。

.btn:active {
transform: translateY(2px);
}
.btn:focus {
transform: translateY(-2px);
}

其中：
1.:focus: 當按鈕獲得焦點時，應用此樣式變化；
2.transform: 按鈕向上或向下移動2像素就是實現的動畫效果；

到此，我們就成功地實現了按鈕按下彈起的動畫效果。你可以試著將下面的代碼復制到HTML中，看看效果如何。

<button class="btn">點我試試</button>