uniapp实现微信一键登录按钮样式,如何开发胶囊按钮的样式

效果图:

关键点:让圆角的值变成高度的一半。

核心样式:

css 复制代码
.content .btn{
		width: 600rpx;
		border-radius: 300rpx;
		background-color: rgb(62,204,97);
		color: white;
		font-weight: 500;
	}

完整代码:

html 复制代码
<template>
	<view class="content">
		<h1 class="title">宝宝相册</h1>
		<image class="img" src="../../static/boy1.png"></image>
		<button class="btn">微信一键登录</button>
		<view>我已阅读并同意用户注册协议和隐私政策</view>
	</view>
</template>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.content .title {
		font-size: 34rpx;
		font-weight: 300;
		margin: 30rpx 0;
	}

	.content .img {
		width: 80%;
		margin-bottom: 30rpx;
		border-radius: 3%;
	}
	
	.content .btn{
		width: 600rpx;
		border-radius: 300rpx;
		background-color: rgb(62,204,97);
		color: white;
		font-weight: 500;
	}
</style>
相关推荐
懂软件的胡子个哥15 小时前
微信二次开发如何接入 AI,真正可用的不是简单自动回复
运维·微信·wechatapi·个人微信号二次开发·微信群管理
PedroQue9916 小时前
uni-app x 事件通信插件重磅上线
前端·uni-app
懂软件的胡子个哥17 小时前
微信二次开发如何设计统一消息中心,让后期扩展更简单
微信·自动化·wechatapi·个人微信号二次开发·微信群管理
SXkehuirongsheng20 小时前
APP定制开发怎么判断服务商的技术实力
百度·微信·app·网站建设·文心一言·微信公众平台
gnip20 小时前
uni-app 原生插件
前端·javascript·uni-app
iPad协议个微协议21 小时前
微信二次开发如何做好日志和监控,很多线上问题不是接口本身
微信·自动化·微信开发·wechatapi·个人微信号二次开发
iPad协议个微协议1 天前
微信二次开发如何用 WechatApi 打通消息、客户和业务系统
运维·微信·自动化·微信开发·wechatapi·个人微信开发
懂软件的胡子个哥2 天前
微信 API 消息回调怎么设计,才能避免丢消息和重复处理
运维·微信·架构·wechatapi·个人微信号二次开发
懂软件的胡子个哥2 天前
微信群运营怎么通过微信 API 做问题提醒和活动管理
微信·自动化·wechatapi·个人微信号二次开发
白远山2 天前
自助健身小程序源码:架构拆解、核心链路与本地部署实战
java·架构·uni-app·需求分析