将别人写的css按钮效果用vue实现
<template>
<button class="bubbly-button" :class="activeClass ==true?'animate':''" @click="gethome()">立即下载</button>
</template>
<script>
export default {
data(){
return {
activeClass:false
}
},
methods:{
gethome(){
//添加时间延时,可以消除点击按钮时的伪元素
setTimeout(()=>{
this.activeClass = true;
},200);
}
}
}
</script>
<style lang="scss" scoped>
.bubbly-button {
width: 1.91rem;
height: 0.56rem;
color: #fff;
background-color:#d26864 ;
border: none;
cursor: pointer;
position: relative;
transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
//box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);
}
.bubbly-button:focus {
outline: 0;
}
.bubbly-button:before, .bubbly-button:after {
position: absolu