收藏按鈕在網站設計中扮演著非常重要的角色，讓用戶可以快速方便地將自己感興趣的內容保存下來。那么，如何設計一個漂亮的收藏按鈕呢？下面，我們就來看一下CSS中幾個關鍵的屬性。

/* 定義收藏按鈕的樣式 */
.collection-button {
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid #999999;
box-sizing: border-box;
background-color: #ffffff;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.collection-button:hover {
background-color: #999999;
border-color: #999999;
}
.collection-button .icon {
display: block;
width: 18px;
height: 18px;
margin: 8px auto;
background-image: url("collection-icon.png");
background-repeat: no-repeat;
background-size: cover;
}
.collection-button.active {
background-color: #ff6666;
border-color: #ff6666;
}
.collection-button.active .icon {
background-image: url("collection-icon-active.png");
}

上述代碼中，我們定義了一個名為.collection-button的類，這個類包含了寬高、邊框、背景顏色、光標類型等基礎屬性，以及:hover和.active這兩個狀態。其中，:hover狀態表示鼠標指針懸停在按鈕上時的樣式，.active狀態表示按鈕被激活時的樣式。

需要注意的是，我們在收藏按鈕中定義了一個名為.icon的子元素，用于顯示收藏圖標。在未激活狀態下，收藏圖標采用默認的樣式，而在激活狀態下，則顯示為active狀態下的圖標。

除此之外，我們還可以通過CSS中的其他屬性，例如opacity、transform等，來實現更加豐富的收藏按鈕效果。但最核心的依然是基礎的結構和狀態定義。學會了這些基礎，你就可以設計出一款漂亮的、符合用戶需求的收藏按鈕啦！