演示效果
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);
},
4.波纹颜色默认为#333,接收第二个参数修改波纹颜色
clickBtn(e) {
buttonAnimation(e, 'red')
},
示例 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;