前言
Hello！小伙伴！ 首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～
哈哈 自我介绍一下
昵称：海轰
标签：程序猿一只｜C++选手｜学生
简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～）
学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！
日常分享：微信公众号【海轰Pro】记录生活、学习点滴，分享一些源代码或者学习资料，欢迎关注～
效果展示
Demo代码
WXML
<view class="btn" hover-class="btn_hover" hover-start-time="0"><view class="text" hover-class="text_hover">HaihongPro</view></view>
WXSS
page{display: flex;justify-content: center;align-items: center;height: 100vh;}.btn{width: 200px;height: 100px;color: #fff; background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);border-radius: 7px;position: relative;font-family: 'Lato', sans-serif;font-weight: 500;transition: all 0.5s ease;line-height: 100px;padding: 0;}.btn .text{display: block;width: 100%;height: 100%;font-size: 24px;text-align: center;}.btn::before,.btn::after{position:absolute;content: '';top: 0;right: 0;background: rgba(2, 126, 251, 1);transition: all 0.5s ease;}.btn::before{width: 0;height: 2px;}.btn::after{height: 0;width: 2px;}.btn_hover::before{width: 100%;}.btn_hover::after{height: 100%;}.btn .text::before,.btn .text::after{position: absolute;content: '';bottom: 0;left: 0;transition: all 0.3s ease;background: rgba(2, 126, 251, 1);}.btn .text::before{width: 0;height: 2px;}.btn .text::after{height: 0;width: 2px;}.btn_hover{background: #fff;}.btn .text_hover{color:rgba(2, 126, 251, 1)}.btn_hover .text_hover::before{width:100%;}.btn_hover .text_hover::after{height:100%;}
思路
详细思路讲解参考：「HTML+CSS」–自定义按钮样式【001】
说明：微信小程序button参数不太好设置，这里用的view代替（其实也是可以用button的）
踩坑
在微信小程序中没有hover，取而代之的是：hover-class，也就是说，在原生CSS中，需用使用到hover属性的，在小程序中就需要添加hover-class类，可以看看下面的代码
html
<view class="btn" hover-class="btn_hover" hover-start-time="0"></view>
css
// 类似 btn:hover.btn_hover{background: #fff;}
为了达到类似hover的效果，我们还需要设置hover-start-time=“0”，也就是当用户点击，立刻（0s）触发hover-class的效果
