Facebook Pixel

Like Button

React.js
easy

Description

Create a Like button that changes its appearance based on different states.

You need to implement a Like button that behaves differently based on its current state: default, hover, and clicked. The button should change its styles and the heart icon color as follows:

  1. Default state: The button has a gray border, gray text color, a white background and a red heart ❤️ .
  2. Hover state: The button should show a red border and red text when hovered over.
  3. Clicked state: When clicked, the background color should change to red, the text color should become white, and the heart icon should change to white 🤍.

Constraints & Edge Cases

  • Ensure that the state transitions smoothly between hover and clicked states.
  • The button should toggle between the default and clicked states when clicked.

Reference UI

likeButton

Preview what you need to build

Companies:

amazon
twitter
linkedin
oyo

Solve Similar questions 🔥