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>
相关推荐
赏金术士8 小时前
Kotlin 从入门到进阶 之委托 模块(六)
python·微信·kotlin
陈龙龙的陈龙龙10 小时前
uni-app中获取参数的几个方法
uni-app
果壳~10 小时前
【Uniapp】【rich-text】富文本展示以及图片预览功能解决方案
前端·javascript·uni-app
雯0609~11 小时前
微信小程序的原生开发项目如何转至uni-app
微信小程序·小程序·uni-app
赏金术士11 小时前
Kotlin 从入门到进阶 之基础语法模块(一)
开发语言·微信·kotlin
四方云12 小时前
Uni-app 跨端集成 SIP 电话功能(H5 + App)实战
uni-app
习明然1 天前
UniApp开发体验感受总结
前端·uni-app
yantaohk1 天前
一键下载微信视频号所有页面视频,支持批量下载、加密视频解密、自动去重
网络·微信·音视频
anyup1 天前
全面重构的 uni-app 多平台上传组件,功能强到离谱!
前端·vue.js·uni-app
LIO1 天前
一套代码,多端并行——uni-app + Vue3 多端开发完全指南
前端·vue.js·uni-app