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>
相关推荐
行思理5 小时前
UniApp 打包配置 iOS的UniversalLinks
uni-app·universal link
雪芽蓝域zzs6 小时前
uni-app x 使用 UTS 语言使用 mixins
开发语言·javascript·uni-app
雪芽蓝域zzs6 小时前
uni-app x 中使用 UTS 语言实现兼容鸿蒙的加密
华为·uni-app·harmonyos
2501_915909067 小时前
苹果App Store上架全流程指南从注册到上线
android·ios·小程序·https·uni-app·iphone·webview
anyup1 天前
uni-app 全能日历组件,支持农历、酒店预订、打卡签到、价格日历多种场景
前端·前端框架·uni-app
游了个戏1 天前
用AI做了个小游戏(二)
人工智能·游戏·微信
优雅的大白鹅2 天前
创建uniapp小程序
小程序·uni-app
游了个戏2 天前
我用AI做了个小游戏(一)
人工智能·游戏·微信
游了个戏2 天前
微信小游戏 vs QQ小游戏:表面是兄弟,骨子里是两套完全不同的玩法
人工智能·游戏·微信
Swift社区2 天前
鸿蒙游戏,会不会重演微信小游戏的爆发?
游戏·微信·harmonyos