Like Button

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 border 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 be in default state. On clicking the button, it should be in liked state and on clicking again it should go back to default state.
• The button should toggle between the default and clicked states.
• The button must be labelled "Like" to match the test cases.
• Make sure to use inline css.

Reference UI