# shady-button

> Add pretty hover & click effects to any button.

Latest version **1.2.0** (published 2020-08-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install shady-button
pnpm add shady-button
yarn add shady-button
bun add shady-button
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2020-08-28 |
| First published | 2020-07-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 38.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Ben Honda |
| Maintainers | benhonda |
| Keywords | react, button, click, animation |

## Links

- npm: https://www.npmjs.com/package/shady-button
- Repository: https://github.com/benhonda/shady-button
- Homepage: https://github.com/benhonda/shady-button#readme
- Issues: https://github.com/benhonda/shady-button/issues
- npm.io page: https://npm.io/package/shady-button

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2020-08-28
- 1.1.0 — 2020-07-14
- 1.0.2 — 2020-07-13
- 1.0.1 — 2020-07-12
- 1.0.0 — 2020-07-12

## README

# 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](https://shady.benhonda.dev)__

**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` :

``` bash
npm install shady-button
```

Or with `yarn` :

``` bash
yarn add shady-button
```

## Usage

After installing, import `shady-button` into your project

``` js
// 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:

``` js
<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](https://shady.benhonda.dev)__ 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.

---
_Source: https://npm.io/package/shady-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._