DEMO

Install

$ npm install react-linear-gradient-button

Usage

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import GradientButton from 'react-linear-gradient-button';

class Basic extends Component {
  render() {
    return <GradientButton>BUTTON</GradientButton>;
  }
}

ReactDOM.render(<Basic />, document.getElementById('root'));

Features

• No external CSS file.
• Built with styled-components 💅

Props

| Props | Type | Default | Description | | :------------------------ | :----------------------------------------------------: | :-------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | children | 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. | | borderWidth | 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. |

License

MIT © xxhomey19