NgxCustomButton

This library was generated with Angular CLI version 16.2.0.

Custom Button Library

A simple and customizable button component that can be easily integrated into your project. This library allows you to create buttons with different styles, including custom colors, borders, gradients, and more.

Installation

To install this library, run the following npm command:

npm install ngx-gradient-button

Usage

Once installed, you can use the component in your application. Below is an example of how to use the button with different customizable options:

<ngx-gradientbutton label="Submit" color="primary" [borderRadius]="'10px'" [outline]="'red'" [height]="'50px'" [width]="'200px'" [gradientStart]="'blue'" [gradientEnd]="'purple'" [hoverGradientStart]="'green'" [hoverGradientEnd]="'yellow'">

## Parameters

Here are the available parameters you can customize for your button:

| Parameter | Type | Description | |----------------------|--------|------------------------------------------------------------------------------| | label | String | The text displayed on the button. | | color | String | The base color of the button (e.g., "primary", "secondary"). | | borderRadius | String | The border radius of the button (e.g., '10px'). | | outline | String | The outline color of the button (e.g., 'red'). | | height | String | The height of the button (e.g., '50px'). | | width | String | The width of the button (e.g., '200px'). | | gradientStart | String | The starting color for the gradient (e.g., 'blue'). | | gradientEnd | String | The ending color for the gradient (e.g., 'purple'). | | hoverGradientStart | String | The starting color for the gradient when the button is hovered (e.g., 'green'). | | hoverGradientEnd | String | The ending color for the gradient when the button is hovered (e.g., 'yellow'). |

Example

Here’s a more detailed example showcasing the different parameters:

<ngx-radient-button label="Click Me" color="primary" [borderRadius]="'12px'" [outline]="'black'" [height]="'60px'" [width]="'250px'" [gradientStart]="'red'" [gradientEnd]="'orange'" [hoverGradientStart]="'yellow'" [hoverGradientEnd]="'green'">

Compatibility

This library is compatible with the following versions of Angular:

• Angular 13.x.x
• Angular 14.x.x
• Angular 15.x.x
• Angular 16.x.x
• Angular 17.x.x
• Angular 18.x.x
• Angular 19.x.x

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Dineshkumar A