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:
- Default state: The button has a gray border, gray text color, a white background and a red heart ❤️ .
- Hover state: The button should show a red border and red text when hovered over.
- 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
Preview what you need to build
Companies:
amazon
twitter
linkedin
oyo
Solve Similar questions 🔥