# vue-animate-buttons

> A simple set of Vue buttons

Latest version **1.1.1** (published 2019-12-20) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-animate-buttons
pnpm add vue-animate-buttons
yarn add vue-animate-buttons
bun add vue-animate-buttons
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2019-12-20 |
| First published | 2019-12-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 59.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | leehormone@yeah.net |
| Maintainers | qqwq3 |
| Keywords | vue, js |

## Links

- npm: https://www.npmjs.com/package/vue-animate-buttons
- Repository: https://github.com/qqwq3/vue-animate-buttons
- Homepage: https://github.com/qqwq3/vue-animate-buttons#readme
- Issues: https://github.com/qqwq3/vue-animate-buttons/issues
- npm.io page: https://npm.io/package/vue-animate-buttons

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.1.1 (latest) — 2019-12-20
- 1.1.0 — 2019-12-19
- 1.0.5 — 2019-12-19
- 1.0.4 — 2019-12-19
- 1.0.3 — 2019-12-19

## README

## [Vue](https://cn.vuejs.org/v2/guide/components.html) button animation set
### Start
```javascript
  npm install vue-animate-buttons -S
```
### Usage
```javascript
// Global import in main.js
import VueAnimateButtons from 'vue-animate-buttons';
Vue.use(VueAnimateButtons);

// Import on demand in Vue file
import { ButtonBounce, ...... } from 'vue-animate-buttons';

components: {
   'button-bounce': ButtonBounce
},

<button-bounce
  @click="onClick"
  :button-type="'submit'"
  :className="'vue'"
  :is-slot="true"
  :type="'in'"
>
      This is an animation button
</button-bounce>

// CSS Control colors
.vue:before {
   background: red !important;
}
```
### Buttons
| name                           | props             | difference                                                                                     |
| ------------------------------ | ---------------- | -------------- |
| [ButtonBounce](https://github.com/qqwq3/vue-animate-buttons/blob/master/src/button-bounce.vue)                           | styles, click, text, isSlot, className, type           | type (in , out)    
| [ButtonBubble](https://github.com/qqwq3/vue-animate-buttons/blob/master/src/button-bubble.vue)                           | styles, click, text, isSlot, className, position           | position (left, right, top, bottom)   
| [ButtonBubbleFloat](https://github.com/qqwq3/vue-animate-buttons/blob/master/src/button-bubble-float.vue)                           | styles, click, text, isSlot, className, position           | position (left, right, top, bottom)   
| [ButtonBuzz](https://github.com/qqwq3/vue-animate-buttons/blob/master/src/button-buzz.vue)                           | styles, click, text, isSlot, className           | 
| [ButtonCurl](https://github.com/qqwq3/vue-animate-buttons/blob/master/src/button-curl.vue)                           | styles, click, text, isSlot, className, direction           | direction (top-left; top-right; bottom-right; bottom-left)
| [ButtonFloatShadow](https://github.com/qqwq3/vue-animate-buttons/blob/master/src/button-float-shadow.vue)                           | styles, click, text, isSlot, className           | 
| [ButtonGrow](https://github.com/qqwq3/vue-animate-buttons/blob/master/src/button-grow.vue)                           | styles, click, text, isSlot, className           | 
| [ButtonGrowRotate](https://github.com/qqwq3/vue-animate-buttons/blob/master/src/button-grow-rotate.vue)                           | styles, click, text, isSlot, className           | 
| [ButtonOverlineReveal](https://github.com/qqwq3/vue-animate-buttons/blob/master/src/button-overline-reveal.vue)                           | styles, click, text, isSlot, className           | 
| [ButtonPop](https://github.com/qqwq3/vue-animate-buttons/blob/master/src/button-pop.vue)                           | styles, click, text, isSlot, className           | 
| [ButtonPulse](https://github.com/qqwq3/vue-animate-buttons/blob/master/src/button-pulse.vue)                           | styles, click, text, isSlot, className           | 
| [ButtonPulseGrow](https://github.com/qqwq3/vue-animate-buttons/blob/master/src/button-pulse-grow.vue)                           | styles, click, text, isSlot, className           | 
| [ButtonPulseShrink](https://github.com/qqwq3/vue-animate-buttons/blob/master/src/button-pulse-shrink.vue)                           | styles, click, text, isSlot, className           |
| [ButtonPush](https://github.com/qqwq3/vue-animate-buttons/blob/master/src/button-push.vue)                           | styles, click, text, isSlot, className           |
| [ButtonRipple](https://github.com/qqwq3/vue-animate-buttons/blob/master/src/button-ripple.vue)                           | styles, click, text, isSlot, className, type           | type (in, out)
| [ButtonRotate](https://github.com/qqwq3/vue-animate-buttons/blob/master/src/button-rotate.vue)                           | styles, click, text, isSlot, className           | 
| [ButtonShrink](https://github.com/qqwq3/vue-animate-buttons/blob/master/src/button-shrink.vue)                           | styles, click, text, isSlot, className           | 
| [ButtonUnderline](https://github.com/qqwq3/vue-animate-buttons/blob/master/src/button-underline.vue)                           | styles, click, text, isSlot, className, direction           | direction (left, center, right)
| [ButtonUnderlineReveal](https://github.com/qqwq3/vue-animate-buttons/blob/master/src/button-underline-reveal.vue)                           | styles, click, text, isSlot, className           | 
| [ButtonWobble](https://github.com/qqwq3/vue-animate-buttons/blob/master/src/button-wobble.vue)                           | styles, click, text, isSlot, className, direction           | direction (horizontal, vertical)

### Author
  leehormone@yean.net

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