Create a Like and Dislike Toggle using HTML and CSS

Last Updated : 04 Dec, 2023

Creating a Toggle “Like” and “Dislike” button involves using HTML and CSS to structure and style the buttons. We will use the font awesome icon for the like/dislike button.

We will use Font Awesome Icon to create like and dislike buttons with the help of HTML, and CSS to add styles on the button. To Toggle the Like/Dislike button, we will use JavaScript.

Example 1: We create a like/dislike toggle button.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
  
    <title> 
        Toggle Like/Dislike Button with HTML and CSS 
    </title> 
  
    <!-- Include Font Awesome for icons -->
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> 
  
    <style> 
        body { 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            height: 100vh; 
            margin: 0; 
        } 
  
        .like-btn i { 
            font-size: 40px; 
            cursor: pointer; 
            color: #4CAF50; 
            transition: color 0.3s ease; 
        } 
  
        .like-btn.active i { 
            color: #af4c4c; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="like-btn" onclick="toggleLike()"> 
        <i class="fas fa-thumbs-up"></i> 
    </div> 
  
    <script> 
        let likeBtn = document.querySelector('.like-btn'); 
  
        function toggleLike() { 
            likeBtn.classList.toggle('active'); 
  
            // Toggle Font Awesome class for the  
            // thumbs-up and thumbs-down icons 
            if (likeBtn.classList.contains('active')) { 
                likeBtn.innerHTML =  
                    '<i class="fas fa-thumbs-down"></i>'; 
            } else { 
                likeBtn.innerHTML =  
                    '<i class="fas fa-thumbs-up"></i>'; 
            } 
        } 
    </script> 
</body> 
  
</html>

Output:

Example 2: We create a toggle like/dislike button on a card.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
  
    <title>Card with Like/Dislike Toggle</title> 
      
    <!-- Include Font Awesome for icons -->
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> 
      
    <style> 
        body { 
            font-family: Arial, sans-serif; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            justify-content: center; 
            height: 100vh; 
            margin: 0; 
        } 
  
        .card { 
            width: 300px; 
            border: 1px solid #ccc; 
            border-radius: 8px; 
            padding: 20px; 
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
            margin-bottom: 20px; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
        } 
  
        .like-btn { 
            cursor: pointer; 
            transition: color 0.3s ease; 
        } 
  
        .like-btn i { 
            font-size: 36px; 
        } 
  
        .like-btn.active i { 
            color: #4CAF50; 
            /* Green color for active state */ 
        } 
    </style> 
</head> 
  
<body> 
    <div class="card"> 
        <h2>GeeksforGeeks</h2> 
        <p>A computer Science Portal for Geeks</p> 
        <div class="like-btn" onclick="toggleLike()"> 
            <i class="fas fa-thumbs-up"></i> 
        </div> 
    </div> 
  
    <script> 
        let likeBtn = document.querySelector('.like-btn'); 
  
        function toggleLike() { 
            likeBtn.classList.toggle('active'); 
  
            // Toggle Font Awesome class for the 
            // thumbs-up and thumbs-down icons 
            if (likeBtn.classList.contains('active')) { 
                likeBtn.innerHTML =  
                    '<i class="fas fa-thumbs-down"></i>'; 
            } else { 
                likeBtn.innerHTML =  
                    '<i class="fas fa-thumbs-up"></i>'; 
            } 
        } 
    </script> 
</body> 
  
</html>