button-animation

演示效果

1.按钮点击产生波纹

https://img12.360buyimg.com/ddimg/jfs/t1/191685/13/18463/235002/61190b62E79e52c3f/6fa7428e9032ac56.gif

2.按钮悬浮开始变色

https://img11.360buyimg.com/ddimg/jfs/t1/206228/40/1399/141495/61192b9dE71596c97/5680e5f5ba0a549f.gif

install

npm i -s button-animation

1.buttonAnimation

import

import { buttonAnimation } from "button-animation";

绑定点击事件,需要传入 event

  clickBtn(e) {
      buttonAnimation(e);
    },

波纹颜色默认为#333，接收第二个参数修改波纹颜色

clickBtn(e) {
      buttonAnimation(e, 'red')
      //buttonAnimation(e,'#4e94fd');
      //buttonAnimation(e,'linear-gradient(90deg, #025ce3, #4e94fd)');
    },

示例 demo

<template>
  <article class="buttons">
    <button @click="clickBtn">Button</button>
    <button @click="clickBtn">Button</button>
  </article>
</template>

<script>
import { buttonAnimation } from "button-animation";
export default {
  methods: {
    clickBtn(e) {
      buttonAnimation(e);
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  margin: 0;
  background-color: #350048;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
button {
  border: none;
  outline: none;
  color: #fff;
  border-radius: 45px;
  margin: 0 15px;
  padding: 14px 40px;
  font-size: 30px;
  font-weight: 400;
  background: linear-gradient(90deg, #6616d0, #ac34e7);
  box-shadow: 3px 5px rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(0, 0, 0, 1);
}
button:nth-child(2) {
  background: linear-gradient(90deg, #025ce3, #4e94fd);
}
</style>

注意

button 的 css 会被设置为 position:relative;overflow:hidden;

2.buttonHover

import

import { buttonHover } from "button-animation";

mounted生命周期中注册，接收三个参数，第一个为button类名，第二个为动画颜色，第三个为动画方向

  mounted () {
        buttonHover('button', '#ff7242', 'left')
        buttonHover('button1', '#ff7242', 'center')
        buttonHover('button2', '#ff7242', 'right')
    },

示例 demo

<template>
    <article class="buttons">
        <button class="button">Button
        </button>
        <button class="button1">Button
        </button>
        <button class="button2">Button
        </button>
    </article>
</template>

<script >
import { buttonHover } from "button-animation";
export default {
    mounted () {
        buttonHover('button', '#ff7242', 'left')
        buttonHover('button1', '#ff7242', 'center')
        buttonHover('button2', '#ff7242', 'right')
    }
}
</script>

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    margin: 0;
    background-color: #350048;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
button {
    border: none;
    outline: none;
    color: #fff;
    border-radius: 45px;
    margin: 0 15px;
    padding: 14px 40px;
    font-size: 30px;
    font-weight: 400;
    background: linear-gradient(90deg, #6616d0, #ac34e7);
    box-shadow: 3px 5px rgba(0, 0, 0, 0.1);
    border-top: 1px solid rgba(0, 0, 0, 1);
}
button:nth-child(2) {
    background: linear-gradient(90deg, #025ce3, #4e94fd);
}
</style>

注意

button 的 css 会被设置为 position:relative;overflow:hidden;