JSFiddle - React, Tailwind, and code Playground

by wllai2001

HTML

<!--<div class="d">我已是南臺粉絲</div>-->

 <div class="btn-vote btn-aqua" onclick='clickvotebtn(this)'>
                            <div class="blaze"></div>                          
                            <div class="text-center vote-text">點此投票</div>
                          
                        </div>

CSS

.d{border: 3px solid #CC0000;color:red;width:140px;text-align:center;line-height:30px;border-radius:10px;font-weight:800;background:#FFCC22;}


.btn-aqua.btn-vote.btn-aqua.voted {
    width: 120px;
    height: 50px;
    border-radius: 12px;
    background: #8bc34a;
    color: #ffffff;
    padding: 30px 0 0 0;
    font-size: 24px;
    box-shadow: #8bc34a99 0px 10px 16px;
    border: 2px solid;
    border-top: #4CAF50;
    border-right-color: #4CAF50;
    border-bottom-color: #4CAF50;
    border-left: #8BC34A;
}

.btn-vote.btn-aqua.voted:hover {
    background: #8bc34add;
    padding: 31px 0 0 0;
}


.btn-aqua {
    width: 120px;
    height: 50px;
    border-radius: 12px;
    background: #00bcd499;
    color: #ffffff;
    padding: 30px 0 0 0;
    text-align:center;
    font-size: 24px;
    box-shadow: #00bcd499 0px 10px 16px;
    border: 2px solid;
    border-top: #8ba2c1;
    border-right-color: #5890bf;
    border-bottom-color: #4f93ca;
    border-left: #768fa5;
}


.btn-aqua:hover {
    background: #00bcd4;
    padding: 31px 0 0 0;
    cursor: pointer;
}

.btn-aqua .blaze {
    position: absolute;
    top: 10px;
    left: 14px;
    border-radius: 12px;
    height: 1px;
    width: 109px;
    padding: 6px 0;
    background: #ffffff55;
}

JavaScript

function clickvotebtn(sender) {
    //找到操作的本體，及準備送回後端的儲存容器
    var $this = $(sender);
   
    //如果已投過的項目被點，則取消目前被投票的狀態，並且清掉目前被記錄準備被送至後端的投票紀錄
    if ($this.hasClass("voted")) {
        $this.removeClass("voted");     
        
    }
    //如果項目尚未被投，則項目的型態轉換成已投票的狀態，以套用相關樣式，並將投票值暫存至後送容器中
    else {
        $this.addClass("voted");       
    }}