Tạo nút Like/Dislike toggle với CSS và JavaScript

Sử dụng Font Awesome icon và toggle class để chuyển giữa like/dislike.

Ví dụ

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;       padding: 20px;    }    .fa {       font-size: 50px;       cursor: pointer;       user-select: none;    }    .fa-thumbs-up {       color: blue;    }    .fa-thumbs-down {       color: red;    }    .fa:hover {       transform: scale(1.2);    } </style> </head> <body> <h1>Ví dụ nút Like/Dislike</h1> <i class="fa fa-thumbs-up"></i> <script>    document.querySelector(".fa").addEventListener("click", function(event) {       toggleLike(event);    });    function toggleLike(ele) {       ele.target.classList.toggle("fa-thumbs-down");    } </script> </body> </html>

Kết quả

Icon ngón tay lên (xanh) click thành ngón tay xuống (đỏ), click lại quay lại.