New Component Suggestion - Interactive Button

[suryanshsingh2001]

New Component Suggestion

Description:

I would like to suggest the addition of a new interactive button component with a cool animation to the Web Componentify project. This component would enhance the user experience by providing an eye-catching and interactive element that can be easily integrated into web applications.

Component Details:

• Component Type: Interactive Button
• Animation: The button features a hover animation that includes a change in background color, text color, scaling, and rotation.
• Purpose: This component is designed to provide an attractive and interactive button that can be used for various call-to-action (CTA) elements in web applications.

Implementation Ideas:

The provided component code already includes the necessary structure and styling for the interactive button. To integrate this component into the project, follow these steps:

1. File Placement: Place the Button.js file in an appropriate directory within the project structure.

2. Component Props:

   • label: The text to be displayed on the button.
   • iconURL (optional): An optional URL for an icon to be displayed next to the label.
   • backgroundColor: Background color of the button.
   • textColor: Text color of the button.
   • borderColor: Border color of the button.
   • fullWidth (optional): A boolean prop to make the button stretch to full width.

3. Styling Customization: Developers can customize the button's appearance by passing appropriate values for the backgroundColor, textColor, and borderColor props.

4. Animation: The component already includes a hover animation that changes the background color, text color, and triggers scaling and rotation. No additional implementation is required for this animation.

5. Code Snippet

   <Button label="Shop Details" iconURL={arrowRight} />

Additional Information:

This interactive button component would be a valuable addition to the Web Componentify project, as it can be used to create engaging and visually appealing user interfaces.

[suryanshsingh2001]

@vaishnavi-3969 Can you assign this issue to me and label this as hacktoberfest label to get PRs submitted in hackactoberfest 2023.

[vaishnavi-3969]

Hey @suryanshsingh2001! Thank you for raising an issue 💗 You have been assigned this issue you can start working on the issue 👍🏻

[suryanshsingh2001]

@vaishnavi-3969 I have made the necessary PR for this issue. Make sure to label the PR with hacktoberfest-accepted after reviewing it.

Component Added: Interactive Button #8