在現代網站設計中，一個常見的功能就是點贊或喜歡系統。如果你也想在你的網站上增加這個功能，那么CSS絕對是你的不二選擇。

在HTML中，點贊按鈕通常是按鈕或超鏈接，而在CSS中，我們使用偽元素來創建這個按鈕。通過使用:before或:after偽元素，我們可以將樣式如圖標、條紋或顏色等應用到元素的某個位置。

.like-button {
position: relative;
padding: 10px 25px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 25px;
color: #333;
text-align: center;
cursor: pointer;
}
.like-button:before {
font-family: "Font Awesome";
content: "\f08a";
position: absolute;
left: -15px;
font-size: 1.2em;
top: 50%;
transform: translateY(-50%);
color: #ccc;
}
.like-button.liked:before {
color: #f44336;
}

在這段代碼中，我們首先定義了一個類名為“like-button”的容器，并且將其定位為相對。之后我們為這個容器設置了一些基本樣式，如padding、背景顏色、邊框、顏色等。

接下來，我們使用：before偽元素來創建點贊圖標。該元素的內容是Font Awesome中的字體圖標，我們使用absolute定位將其放到了like-button容器的前面。通過設置top屬性和transform來將圖標居中垂直對齊。

最后，我們在.like-button與.liked-button之間切換，以便在點贊時更改樣式。我們使用另一種顏色來呈現點贊狀態。可以使用JavaScript來實現此功能。

通過以上的方法，我們可以在CSS中創建非常有趣的點贊按鈕，并將其添加到我們的網站中。這些按鈕可與不同的效果和動畫一起使用，以增強用戶體驗。