CSS作為前端開發必不可少的一部分，其功能之強大讓人無法想象。作為其中一項基本功能，點贊效果已經成為眾多網頁設計的必備元素。接下來我們將使用CSS來設計點贊效果。

HTML代碼：
<div id="thumb" class="thumb">
<i class="fa fa-thumbs-up like"></i>
<p class="counter">2.4k</p>
</div>
CSS代碼：
.thumb {
display: flex;
align-items: center;
border-radius: 4px;
padding: 4px 8px;
background-color: #f2f2f2;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.thumb:hover {
background-color: #e1e1e1;
}
.like {
font-size: 20px;
color: #4CAF50;
margin-right: 4px;
transition: all 0.3s ease-in-out;
}
.like.active {
color: #f44336;
transform: scale(1.2);
}
.counter {
font-size: 16px;
color: #666666;
margin: 0;
transition: all 0.3s ease-in-out;
}
.counter.active {
color: #4CAF50;
}

HTML代碼中，我們使用了font awesome圖標庫來實現點贊圖標，并加上了點贊計數器。CSS代碼中，我們設置了整個容器的樣式，包括強制容器中的元素水平居中，圓角邊框，背景顏色以及光標形狀。我們還為容器設置了懸停時的動畫效果。對于點贊圖標和計數器，我們給它們分別設置了不同的CSS屬性，在點贊被選中時它們會進行相應的變化，包括顏色，字體大小和計數器數目等。最后將相關的所有樣式屬性設置為過渡狀態，以實現流暢的動畫效果。

通過這樣簡單的CSS代碼，我們實現了一個簡潔美觀的點贊效果。它可以應用于許多網頁設計中，包括社交媒體網站、新聞站等等。你可以根據自己的需要對其進行進一步地定制化。祝你玩得愉快！