Blend Buttons

$3

Simple button component that will match its aesthetic to its parents'.

(React functional component button element that adjusts its styles to its direct parents' styles.)

The button's font-color matches that of its direct parent's background color. The button's background-color is assigned by user via "colorMain" prop. While hovering, the background will match that of its direct parent, and the font-color and border will transition to "colorMain" prop color.

$3

Demo on Netlify Blend Buttons Demo

$3

$3

npm i react-blend-buttons

$3

import BlendButton from "react-blend-buttons";

//All custom props being utilized

btnText={"Blend Button"}
colorMain={"goldenrod"}
borderRadius={"10px"}
padding={"3vw"}
fontSize={"18px"}
/>

Use the BlendButton component wherever you would use a button element.

//No props

$3

You can configure your BlendButton via props...

- btnText: Text to be displayed in button.
- Type: String.
- Default value is "Submit".
- colorMain: Color assigned to button background-color, btnText color, and border while being hovered.

- Type: String.
- Default Value is "black"

- borderRadius: Sets button border-radius.

- Type: String.
- Default value is "0px".

- padding: Sets buttons padding.

- Type: String.
- Default value is ".8vw 2vw".

- fontSize: Sets buttons font-size.

- Type: String.
- Default value is button element default size.

- onClick

- Type: function
- To user executes just as react's onClick handler executes.

### Blend Buttons accept all the same attributes that html buttons accept but as props.

- name
- style
- value
- type
- autofocus
- disabled
- formenctype
- formmethod
- formaction
- formnovalidate
- formtarget

$3

All Blend Buttons are rendered with a class of "blend-btn".

Styling Blend Buttons in a style sheet will not work as the inline style built in the component will overwrite it. Instead, pass your own style object as a prop. This will merge your style object with the style object already in place.

Each Blend button is rendered with a unique id of

"blend-btn-[4 digit unique id]"

Blend Buttons