react-linear-gradient-button

react-linear-gradient-button

React linear gradient button component

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