button按钮美化

1，截图

2，源码
链接：https://pan.baidu.com/s/191Q2QDXbBqP4RK28nOUWag?pwd=qox1
提取码：qox1
–来自百度网盘超级会员V4的分享
3，代码
buttonWl.vue

<template>
<div :style="{'--height':height,'--width':width}">
  <button class="my-button"><span class="iconfont icon-sousuo"></span></button>
</div>
</template>

<script>
import "@/icon/iconfont.css"
export default {
  name: "buttonWl",
  data(){
    return{
    // //  按钮的height
    //   height:'',
    // //  按钮的width
    //   width:''
    }
  },
  props:['height','width']

}
</script>

<style scoped>
:root{
/*  按钮的height*/
  --height:'';
  /*按钮的width*/
  --width:'';
}
.my-button {
  background-color: rgb(236, 245, 255);
  border: none;
  color: rgb(92, 158, 255);
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
  height: var(--height);
  width: var(--width);
}

.my-button:hover{
  background-color: rgb(92, 158, 255);
  color: rgb(236, 245, 255);
  transform: scale(0.95);
}

</style>

homeWl.vue

<template>
<div>
<button-wl></button-wl>
</div>
</template>

<script>
import ButtonWl from "@/components/buttonWl/buttonWl";
export default {
  name: "homeWl",
  components: {ButtonWl},
  data(){
    return{
      //  按钮的height
      height:'',
      //  按钮的width
      width:''
    }
  },
  mounted() {
    this.gethomeheight()
    this.gethomewidth()
    window.addEventListener('resize', this.gethomewidth); // 在窗口大小改变时重新获取窗口宽度
    window.addEventListener('resize', this.gethomeheight);
  },

  methods:{
    gethomewidth(){
      // 获取窗口宽度
      var windowwidth = window.innerWidth
      // 按钮的width
      this.width = parseInt(windowwidth/9/4)+'px'
    },
    // 获得窗口height度
    gethomeheight(){

      var windowheight = window.innerHeight
      this.height = parseInt(windowheight/9/3)+'px'

    }
  },
}
</script>

<style scoped>

</style>

4，参数解释
// 按钮的height
height:‘’,
// 按钮的width
width:‘’
5，视频演示
【button按钮美化】 https://www.bilibili.com/video/BV1qP411Q7eW/?share_source=copy_web&vd_source=58607fc67d165b8caff1ed8bfcefd35b