前言

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的效果

微信小程序--自定义按钮样式（1）相关推荐

微信小程序自定义checkbox样式
微信小程序自定义checkbox样式 checkbox .wx-checkbox-input{width:16px;height:16px;} checkbox .wx-checkbox-input. ...
关于微信小程序自定义Picker样式的picker-view
这里给大家介绍一下在开发微信小程序中使用到需要自定义样式的picker(picker-view)的基本用法这里就是一个很简单的自定义样式的Picker. 下面贴出代码 wxml: <picke ...
微信小程序自定义表格样式
微信小程序中没有关于table组件的内容,所以如果在小程序中需要用到列表样式时,就可以通过flex布局利用view设置样式模仿table的样式 wxml: <view class="t ...
uni-app 微信小程序自定义radio样式
/* radio 选中后的样式 *//deep/ uni-radio .uni-radio-input.uni-radio-input-checked {background-color: #65D9 ...
微信小程序自定义选中样式打小勾
<view class="form-btn {{currentIndex==1?'form-active':''}}" id="1" bindtap=&q ...
微信小程序自定义tabbar【中间凸起样式】
微信小程序自定义tabBar样式,选中后中间凸起效果预览微信开发文档:自定义tabBar 一.配置信息在 app.json 中的 tabBar 中指定 custom 字段为 true[允许使用自 ...
微信小程序进度条样式_详解微信小程序——自定义圆形进度条
微信小程序自定义圆形进度条,具体如下: 无图无真相,先上图: 实现思路,先绘制底层的灰色圆圈背景,再绘制上层的蓝色进度条. 代码实现: JS代码: 页面初始化 options为页面跳转所带来的参数 ...
微信小程序自定义修改swiper指示点样式
最近要用到微信小程序,于是就以CSDN的CSDN会员小程序作为练手案例,但是当我在使用官方的Swiper组件时发现,官方的指示点和我想要的效果不一致.于是,经过各种找资料,最终发现了解决方法. 官方的 ...
原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)
本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下实现自定义大致需要以下?步骤: 1.在页面.JSON文件进行相关配置,以便去掉原生 "navigationSt ...
微信自定义tabbar有小红点_微信小程序自定义 tabbar
一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...

微信小程序--自定义按钮样式（1）

前言

效果展示

Demo代码

思路

踩坑

微信小程序--自定义按钮样式（1）相关推荐

最新文章

热门文章