當我們在網頁設計中需要添加按鈕時，通常會使用CSS來實現。在這些按鈕中，有一種效果是按鈕在鼠標懸停時會上下移動，這種效果看起來非常酷炫，下面我們來探究一下如何實現。

.button {
position: relative;
top: 0;
transition: top 0.3s ease;
}
.button:hover {
top: 5px;
}

我們在CSS中定義了一個名為button的類，使用了position:relative屬性來指定元素相對自身定位，并設置了top屬性來表示元素的初始位置。同時使用transition屬性來指定元素從初始位置到最終位置的過渡效果，這里的參數0.3s表示過渡時長，ease表示緩動函數，可以使得過渡效果更加自然。

在:hover偽類中，我們又設置了一個top屬性值為5px，表示在鼠標懸停時，元素將向下移動5個像素。當鼠標移開時，過渡效果也將發生，元素回到原本位置。

點擊我

此時我們只需要在HTML中使用button標簽并添加button類名即可，這樣我們就可以達到我們預期的效果了。

綜上，通過這篇文章，我們了解了如何使用CSS實現按鈕的上下移動效果，也讓我們更加深入地理解CSS的基礎知識和應用。希望這個小技巧可以為你在網頁設計中創造更多的樂趣和驚喜。