在網頁設計中，點贊效果是非常常見的一個交互形式，能夠吸引用戶的關注，提高用戶的參與度。在本文中，我們將介紹如何通過JavaScript和CSS實現一個簡單的點贊效果。

// JavaScript代碼
var likeBtn = document.querySelector('.like-btn');
var likeCount = document.querySelector('.like-count');
var isLiked = false;
likeBtn.addEventListener('click', function() {
if (!isLiked) {
likeCount.innerHTML++;
likeBtn.classList.add('liked');
isLiked = true;
} else {
likeCount.innerHTML--;
likeBtn.classList.remove('liked');
isLiked = false;
}
});

JavaScript代碼中，我們使用了querySelector方法選擇點贊按鈕（class為like-btn）和點贊數量（class為like-count）。通過添加和移除class名為liked，實現按鈕的點擊狀態，isLiked變量則用于標記當前狀態是否已點贊。

/* CSS代碼 */
.like-btn {
padding: 10px;
border-radius: 50%;
background-color: #eee;
cursor: pointer;
transition: all .3s ease;
}
.like-btn:hover {
background-color: #ccc;
}
.like-btn.liked {
background-color: red;
color: #fff;
}
.like-count {
display: inline-block;
margin-left: 10px;
font-size: 16px;
}

CSS代碼則用于美化點贊按鈕和數量。給按鈕添加圓角邊框和背景色，通過:hover效果實現鼠標懸停效果；當點贊狀態被激活時，則將按鈕的背景色改為紅色并移除hover效果，同時更改字體顏色。點贊數量則通過margin控制與按鈕的距離，設置字體大小。

通過上述代碼，我們實現了一個簡單的點贊效果。當然，點贊效果還可以有很多變體，如加入動畫效果、增加點贊總數統計等，我們可以通過學習更多的JavaScript和CSS技術，打造更加復雜、精美的交互效果。