Shady Button

Easy color shading for your buttons to make pretty hover & click events.

• No dependencies

• < 50kb package

• Dead simple to implement

See the DEMO

Note: This package is designed for use in React compliant projects.

TODO

• Create text-only effect (no background color)
• Create more effects (other than darken and lighten)

Install

Install with npm :

npm install shady-button

Or with yarn :

yarn add shady-button

Usage

After installing, import shady-button into your project

// ES modules
import ShadyButton from 'shady-button';
 
// CommonJS
var ShadyButton = require('shady-button');

Then use ShadyButton like you would a normal <button> element. For example:

<ShadyButton backgroundColor="#FFCDD2">Hello, World</ShadyButton>

Custom Attributes

Along with these you can also use any standard HTML Button element attribute (id, onClick, etc.). See the DEMO for example implementation.

Attribute	Description	Type	Default
backgroundColor	the initial background color	6-character hex or RGB string	"#DDDDDD"
mode	lighten or darken the background color	String ("lighten" or "darken")	"lighten"
hoverShadeStrength	the strength of shading on mouse over	Number (scale from 0 to 1.4)	0.44
clickShadeStrength	the strength of shading on mouse down	Number (scale from 0 to 1.4)	0.50
disable	disable the effect	Boolean	false

Error Handling

Shady should never break your app. If an invalid attribute is given, Shady will output a descriptive error message in the console.