Facebook like button not functioning

Question

I want to copy the like button of Facebook using HTML and CSS. For example, when you click the like button, a blue like button will appear. Does anyone know how to achieve this?

I want it to be similar to Facebook, not the reactions. I only need to know how to code it, so when you click the like button, a blue like button will appear.

Answer 1

It seems like you just want a simple aesthetic change: the button looks normal and then when you click it, it turns blue.

Basically, you'll embed an image inside of a button tag, and when you click the image button, you'll run a Javascript action to replace the image with the blue one.

Wherever you're storing your images, you'll need to have two versions of it: one regular and one blue.

HTML:

<button type="button">
    <img id="likeBtn" src="normal-like.png" alt="like">
</button>

Javascript:

 document.getElementById("likeBtn").addEventListener("click", likePost);
    
 function likePost() {
     document.getElementById("likeBtn").src = "blue-like.png";
 }