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]