小程序_造按钮、金属质感

效果图：（图失真了，不要太在意哩）

这是省略了图片，没有放进去的

home.wxml

<view class="fb_pos {{connected? 'connected_on':''}}">
  <view class="pos_one pos_one_bg fb_pos_center" bindtap="fragranceTab" hover-class="pos_active">
    <view class="pos_two fb_pos_center"></view>
  </view>
</view>

home.wxss

.fb_pos{position: absolute;top: 0;left:50%;transform: translateX(-50%);width: 125px;height: 125px;background-color: #000;border-radius: 50%;}
.fb_pos_center{position: absolute;top: 50%;left:50%;transform: translate(-50%,-50%);border-radius: 50%;transition: all .35s ease-in-out;}
.pos_one{width: 110px;height: 110px;box-shadow: -0.1rem -0.1rem 0.3rem #5B5B5B, 0.1rem 0.1rem 0.3rem #303030;}
.pos_one_bg{background: linear-gradient(135deg, #6e6d6d 0%, #303030 60%);}
.connected_on .pos_one_bg{background: linear-gradient(145deg, #2F89FF 5%, #0B45DB 95%);}
.pos_active{filter: opacity(75%);}

添加一个金属色泽的背景的按钮

background: conic-gradient(#d5d5d5 0deg,#fff 25deg, #e0dfdf 90deg, #8a8a8a 135deg, #fff 180deg, #8a8a8a, #fff 270deg,#d5d5d5, #8a8a8a, #d5d5d5) border-box;