小程序 按钮Button样式
来源:互联网 发布:剑三抢激活码软件 编辑:程序博客网 时间:2024/05/20 10:14
场景:
解决思路:
form表单需要button触发提交,但是原生button样式不理想
view+css处理样式
代码如下:
view
<view class="btnbox" hover-class="btnbox_hover"> <button class="btn" bindtap="btnClick"></button> <view class="text">确定</view></view>
.btnbox { width: 500rpx; height: 100rpx; border-radius: 8rpx; position: relative; overflow: hidden; background: #ffb80d; color: #fff; font-size: 36rpx; display: flex; justify-content: center; align-items: center;}.btnbox .btn { position: absolute; width: 100%; height: 100%; margin:0; padding: 0; top: 0; right: 0; bottom: 0; left: 0; border: 0; opacity: 0; background: transparent; z-index: 9;}.btnbox .text { display: block; line-height: 1.5; text-align: center;}.btnbox_hover { background: #e6a301}
解决思路:
创建box,让清空样式的button绝对定位,覆盖整个box。
在box上面创建所需要的样式。
阅读全文
0 0
- 小程序 按钮Button样式
- <小程序>修改button组件的样式
- 自定义button按钮样式
- Button按钮自定义样式
- 微信小程序客服消息按钮太小解决方法contact-button
- button按钮不错的样式
- SWT/Jface Button 按钮样式
- button按钮常用样式设计
- 简洁小按钮样式
- 微信小程序: button 修改样式
- Android自定义Button按钮显示样式
- Android自定义Button按钮显示样式
- Android自定义Button按钮显示样式
- Android自定义Button按钮显示样式
- Android自定义Button按钮显示样式
- Android自定义Button按钮显示样式
- HTML Button 背景图片样式作为按钮显示
- Android自定义Button按钮显示样式
- NC6.5创建单表树卡单据(注意事项)
- jsp+springmvc+spring+mybatis+oracle
- 二叉树搜索树--leetcode
- Hdu 6214 Smallest Minimum Cut(最小割)
- 期刊投稿流程
- 小程序 按钮Button样式
- 井通区块链开发指南
- entOS 6.5下高版本Firefox和selenium报错问题
- Tyvj4875:排列 (单调栈)
- Android Studio使用SVN时添加忽略文件
- linux服务器编译命令
- B1025.数字分类
- 【能源常识】如何理解“电力电量平衡”
- mybatis配置