1.2.0 • Published 4 years ago
shady-button v1.2.0
Shady Button
Easy color shading for your buttons to make pretty hover & click events.
No dependencies
< 50kb package
Dead simple to implement
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-buttonOr with yarn :
yarn add shady-buttonUsage
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.