CSS手點贊按鈕是現在很常見的一種效果，可以在網站或者APP中使用，讓用戶進行點贊操作。本文將介紹如何使用CSS手寫點贊按鈕。

/* 讓多個點贊按鈕排列在一行 */
.container{
display: flex;
justify-content: center;
align-items: center;
}
/* 取消默認樣式，設置元素為塊狀元素，添加鼠標事件 */
.btn{
display: block;
width: 50px;
height: 50px;
border: none;
outline: none;
background: none;
cursor: pointer;
}
/* 未點贊狀態 */
.btn-no{
color: #333;
}
/* 點贊狀態 */
.btn-yes{
color: #f00;
}
/* 點贊動畫 */
.btn-animation{
animation: btnAnimate .5s linear;
}
/* 定義點贊動畫 */
@keyframes btnAnimate{
0%{
transform: scale(1);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}

以上是CSS代碼，接下來是HTML代碼：

<div class="container">
<button class="btn btn-no" id="btn1">贊</button>
<button class="btn btn-no" id="btn2">贊</button>
<button class="btn btn-no" id="btn3">贊</button>
</div>

以上是HTML代碼，其中給每個點贊按鈕都添加了一個id，以方便后面的JavaScript處理。

最后是JavaScript代碼：

// 獲取所有點贊按鈕
var btns = document.querySelectorAll(".btn");
// 給每個按鈕添加點擊事件
btns.forEach(function(btn){
btn.addEventListener("click", function(){
// 判斷當前按鈕是否已點贊
if(this.classList.contains("btn-yes")){
// 已點贊，取消點贊
this.classList.remove("btn-yes");
this.classList.add("btn-no");
}else{
// 未點贊，進行點贊
this.classList.remove("btn-no");
this.classList.add("btn-yes");
this.classList.add("btn-animation");
// 移除點贊動畫
setTimeout(function(){
btn.classList.remove("btn-animation");
}, 500);
}
});
});

以上是完整的CSS手點贊按鈕的代碼，通過這種方式可以實現簡單的點贊功能和動畫效果。