在網頁設計中，我們常常需要添加一個返回頂部的按鈕，以提升用戶體驗。而使用CSS來實現這個按鈕的效果是一種簡單又方便的方法。

首先，我們需要在HTML文件中添加一個按鈕的標簽，比如：

<a href="#" class="back-to-top">回到頂部</a>

這里使用了一個class屬性來命名這個按鈕，方便在CSS樣式中調用。

接著，我們需要在CSS樣式表中定義這個按鈕的樣式。比如：

.back-to-top {
display: none; /* 隱藏按鈕 */
position: fixed; /* 定位方式 */
bottom: 20px; /* 距離底部的距離 */
right: 20px; /* 距離右邊的距離 */
z-index: 99; /* 確保按鈕在其他元素前面 */
font-size: 20px; /* 字體大小 */
color: #fff; /* 字體顏色 */
cursor: pointer; /* 鼠標懸停樣式 */
background-color: #000; /* 背景顏色 */
width: 50px; /* 按鈕寬度 */
height: 50px; /* 按鈕高度 */
line-height: 50px; /* 文字行高，使文字垂直居中 */
text-align: center; /* 文字居中 */
border-radius: 50%; /* 圓形按鈕 */
}
.back-to-top:hover {
background-color: #666; /* 按鈕懸停時的背景顏色 */
}

以上代碼定義了按鈕的基本樣式。其中，display: none;用于隱藏按鈕，position: fixed;用于讓按鈕固定在屏幕上不隨滾動而移動，bottom: 20px;和right: 20px;則分別控制了按鈕距離屏幕底部和右側的距離。

當用戶滾動頁面時，我們需要通過JavaScript來控制按鈕的顯示和隱藏。比如：

window.onscroll = function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop > 500) {
document.querySelector('.back-to-top').style.display = 'block';
} else {
document.querySelector('.back-to-top').style.display = 'none';
}
};

以上代碼中，window.onscroll用于監聽頁面滾動事件，scrollTop獲取了滾動的距離，當滾動距離大于500時，我們將按鈕的樣式設為display: block;，即顯示按鈕；反之，我們將樣式設為display: none;，即隱藏按鈕。

使用CSS實現一個回到頂部的按鈕其實非常簡單。從上面的代碼可以看出，只需要幾行CSS代碼和JavaScript控制，就可以輕松地實現這個功能。