Vue button animation set

Start

  npm install vue-animate-buttons -S

Usage

// 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 | styles, click, text, isSlot, className, type | type (in , out)
| ButtonBubble | styles, click, text, isSlot, className, position | position (left, right, top, bottom)
| ButtonBubbleFloat | styles, click, text, isSlot, className, position | position (left, right, top, bottom)
| ButtonBuzz | styles, click, text, isSlot, className | | ButtonCurl | styles, click, text, isSlot, className, direction | direction (top-left; top-right; bottom-right; bottom-left) | ButtonFloatShadow | styles, click, text, isSlot, className | | ButtonGrow | styles, click, text, isSlot, className | | ButtonGrowRotate | styles, click, text, isSlot, className | | ButtonOverlineReveal | styles, click, text, isSlot, className | | ButtonPop | styles, click, text, isSlot, className | | ButtonPulse | styles, click, text, isSlot, className | | ButtonPulseGrow | styles, click, text, isSlot, className | | ButtonPulseShrink | styles, click, text, isSlot, className | | ButtonPush | styles, click, text, isSlot, className | | ButtonRipple | styles, click, text, isSlot, className, type | type (in, out) | ButtonRotate | styles, click, text, isSlot, className | | ButtonShrink | styles, click, text, isSlot, className | | ButtonUnderline | styles, click, text, isSlot, className, direction | direction (left, center, right) | ButtonUnderlineReveal | styles, click, text, isSlot, className | | ButtonWobble | styles, click, text, isSlot, className, direction | direction (horizontal, vertical)

Author

[email protected]