Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to toggle between a like/dislike button with CSS and JavaScript?

Javascript Web Development Object Oriented Programming

Creating a toggle between like and dislike buttons is a common interactive feature on websites. This article demonstrates how to implement this functionality using HTML, CSS, and JavaScript with Font Awesome icons.

HTML Structure

The HTML file creates the basic structure with a button containing a thumbs-up icon and display elements for both like and dislike states.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <title>Toggle</title>
</head>
<body>
   <div class="toggle">
      <h3>Toggle between a like/dislike button with CSS and JavaScript?</h3>
      <p>Click on the below button to toggle between the like and dislike button</p>
      <button id="btn"><i class="fa fa-thumbs-up"></i></button>
      <div class="like">
         <span id="like">Like<i class="fa fa-thumbs-up"></i></span>
      </div>
      <div class="dislike">
         <span id="dislike">Dislike<i class="fa fa-thumbs-down"></i></span> 
      </div>
   </div>
</body>
</html>

CSS Styling

The CSS file handles the visual styling, positioning, and appearance of all elements including the toggle button and status indicators.

* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

body {
   display: grid;
   place-items: center;
   height: 100vh;
   overflow-x: hidden;
}

.toggle {
   width: 500px;
   height: 300px;
   border: 5px solid black;
   border-radius: 10px;
}

h3 {
   position: relative;
   top: 50px;
   left: 50px;
}

p {
   position: relative;
   top: 60px;
   left: 50px;
}

button {
   width: 100px;
   height: 100px;
   background-color: blue;
   color: white;
   border-radius: 50px;
   font-size: 60px;
   cursor: pointer;
   position: relative;
   left: 200px;
   top: 100px;
}

i {
   width: 100px;
   height: 100px;
   background-color: transparent;
   position: relative;
   top: 10px;
}

span {
   position: relative;
   top: 100px;
   color: green;
   font-weight: 800;
   font-size: 20px;
}

#dislike {
   position: relative;
   left: 210px;
   color: red;
}

.like {
   position: relative;
   top: -80px;
   left: 50px;
}

.like i {
   position: relative;
   top: 0px;
   left: 10px;
}

.dislike {
   position: relative;
   top: -180px;
   left: 155px;
}

.dislike i {
   position: relative;
   top: 3px;
   left: 10px;
}

JavaScript Toggle Functionality

The JavaScript code adds the interactive behavior by listening for click events and toggling the icon classes.

let like = document.querySelector('.fa');
document.getElementById('btn').style.background = 'blue';
like.addEventListener("click", (e) => {
   let like = document.querySelector('.fa');
   e.target.classList.toggle("fa-thumbs-down");
});

Complete Working Example

<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <title>Toggle</title>
   <style>
      * {
         padding: 0;
         margin: 0;
         box-sizing: border-box;
      }

      body {
         display: grid;
         place-items: center;
         height: 100vh;
         overflow-x: hidden;
      }

      .toggle {
         width: 500px;
         height: 300px;
         border: 5px solid black;
         border-radius: 10px;
      }

      h3 {
         position: relative;
         top: 50px;
         left: 50px;
      }

      p {
         position: relative;
         top: 60px;
         left: 50px;
      }

      button {
         width: 100px;
         height: 100px;
         background-color: blue;
         color: white;
         border-radius: 50px;
         font-size: 60px;
         cursor: pointer;
         position: relative;
         left: 200px;
         top: 100px;
      }

      i {
         width: 100px;
         height: 100px;
         background-color: transparent;
         position: relative;
         top: 10px;
      }

      span {
         position: relative;
         top: 100px;
         color: green;
         font-weight: 800;
         font-size: 20px;
      }

      #dislike {
         position: relative;
         left: 210px;
         color: red;
      }

      .like {
         position: relative;
         top: -80px;
         left: 50px;
      }

      .like i {
         position: relative;
         top: 0px;
         left: 10px;
      }

      .dislike {
         position: relative;
         top: -180px;
         left: 155px;
      }

      .dislike i {
         position: relative;
         top: 3px;
         left: 10px;
      }
   </style>
</head>
<body>
   <div class="toggle">
      <h3>Toggle between a like/dislike button with CSS and JavaScript?</h3>
      <p>Click on the below button to toggle between the like and dislike button</p>
      <button id="btn"><i class="fa fa-thumbs-up"></i></button>
      <div class="like">
         <span id="like">Like<i class="fa fa-thumbs-up"></i></span>
      </div>
      <div class="dislike">
         <span id="dislike">Dislike<i class="fa fa-thumbs-down"></i></span> 
      </div>
   </div>
   <script>
      let like = document.querySelector('.fa');
      document.getElementById('btn').style.background = 'blue';
      like.addEventListener("click", (e) => {
         let like = document.querySelector('.fa');
         e.target.classList.toggle("fa-thumbs-down");
      });
   </script>
</body>
</html>

How It Works

The JavaScript uses querySelector() to select the Font Awesome icon and adds an event listener for click events. When clicked, classList.toggle() switches between the fa-thumbs-up and fa-thumbs-down classes, creating the toggle effect.

Key Points

  • Font Awesome provides the thumbs-up and thumbs-down icons
  • CSS handles positioning and styling of all elements
  • JavaScript's classList.toggle() method switches between icon classes
  • Event delegation captures clicks on the button icon

Conclusion

This implementation demonstrates a simple yet effective way to create interactive like/dislike buttons using CSS for styling and JavaScript for functionality. The classList.toggle() method provides an elegant solution for switching between different states.

Updated on: 2026-03-15T23:18:59+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements