button-animation

演示效果

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

使用步骤

1.install

npm i -s button-animation

2.import

import { buttonAnimation } from "button-animation";

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

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

示例 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;