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>
相关推荐
连接池6 小时前
Java 微信二次开发2个坑:多实例回调路由 + 消息分发策略(附 Spring Boot 代码)
微信
ModyQyW8 小时前
vite-plugin-uni-manifest 0.7:在 uni-app 读取之前生成
前端·uni-app
阿砾8 小时前
微信群消息回调处理:乱序、自己发的消息、真实发送者提取
微信
lyz2468599 小时前
uniapp vue3 小程序开发注意事项
uni-app
玩泥巴的14 小时前
源生成与 AOT 就绪的微信生态 .NET SDK:结构、能力边界与 API 定位方法
ai·微信·.net·agent·aot·roslyn
雪芽蓝域zzs14 小时前
WebStorm Uniapp Support + Uniapp Tool + Uniappx Language Service讲解
vue.js·uni-app·webstorm
普通人616 小时前
Web端3D模型加载实战指南_Vue3_uni-app_HTML
前端·javascript·uni-app·html
玩泥巴的2 天前
可能是最现代化的微信生态 .NET 服务端 SDK
ai·微信·.net·aot
PedroQue992 天前
0.8.2 新增 backFallback 配置,无 tabbar 页返回无忧
前端·uni-app
PedroQue993 天前
v0.2.0 架构升级:class + reactive 重塑状态管理
前端·uni-app