按鈕浮起來的效果可以提高網頁的可交互性，增強用戶體驗。下面我們就來學習一下通過CSS如何實現按鈕浮起來的效果。

.btn {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
border-radius: 16px;
}
.btn:hover {
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
transform: translateY(-2px);
}
.btn:active {
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
transform: translateY(2px);
}

上面的CSS代碼中，我們給按鈕添加了:hover和:active兩個偽類來實現浮起來的效果。其中:hover偽類表示當鼠標懸停在按鈕上時，給按鈕添加一個陰影和向上偏移的效果，:active偽類表示當按鈕被點擊時，給按鈕添加一個往下偏移的效果。同時，我們也給按鈕添加了一個transition-duration屬性，讓按鈕的浮起來的效果更加平滑。