React linear gradient button component
$ npm install react-linear-gradient-button
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import GradientButton from 'react-linear-gradient-button';
const Basic extends components {
render() {
return <GradientButton content="BUTTON" />;
}
}
ReactDOM.render(<Basic />, document.getElementById('root'));- No external CSS file.
- Built with styled-components 💅
| Props | Type | Default | Description |
|---|---|---|---|
| content | String || Node |
Required | Content of the button. |
| theme | String |
"Vanusa" |
Gradient theme from uigradients. |
| disabled | Bool |
false |
Should render a disabled button. |
| gradient | [String] |
null |
Array of colors (e.g., ['#f00b47', '#0f6bb6'], [rgba(255,0,0,0), rgba(255,0,0,1)]).NOTE: this props has higher level then theme. |
| angle | String |
"right" |
The angle or direction of linear gradient (e.g., "bottom", "30deg").Check Using Angles section on w3schools/css3_gradients for more information. |
| padding | Number || String || [Number] || [String] |
10 |
The CSS padding argument of the button. Could be an array of four sides, just like CSS.Unit is px. |
| borderRadius | Number |
20 |
The CSS border-radius argument of the button.Unit is px. |
| borderWith | Number |
2 |
The CSS border-width argument of the button.Unit is px. |
| background | String |
"#fff" |
The CSS background-color argument of the button. |
| color | String |
"#ae3560" |
The CSS color argument of the button. |
| fontSize | Number |
16 |
The CSS font-size argument of the button. |
| transition | Object |
See following | The CSS transition argument of the button. |
| transition.property | String |
"all" |
The CSS transition-property argument of the button. |
| transition.duration | Number |
0.2 |
The CSS transition-duration argument of the button.Unit is second. |
| transition.timingFunction | String |
"ease-in-out" |
The CSS transition-timing-function argument of the button. |
| transition.delay | Number |
0 |
The CSS transition-delay argument of the button.Unit is second. |
MIT © xxhomey19
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent