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>
相关推荐
帅帅的记忆13 小时前
uniapp项目调用原生android studio的sdk文件(即aar文件)
android·uni-app·android studio
宠友信息14 小时前
Spring Boot与Redis ZSet实现仿小红书源码双列瀑布流推荐
java·大数据·前端·spring boot·redis·mysql·uni-app
这是个栗子1 天前
uni-app微信小程序开发:高频核心 API(三)
微信小程序·小程序·uni-app
星期一研究室2 天前
创作分发这件事,来看看Codex是怎么做的
人工智能·黑客·微信
大白要努力!4 天前
uni-app 全面入门速查手册
前端·uni-app
李剑一4 天前
uni-app x 实现本地 JSON 文件的导入导出(APP端可用)
android·前端·uni-app
2501_915106324 天前
iOS 软件测试工具性能监控、日志分析 KeyMob、Instruments等
android·ios·小程序·https·uni-app·iphone·webview
PedroQue995 天前
uni-router v2.0.0:四大功能拆分为插件,按需加载
前端·uni-app
不法5 天前
uniapp map地图导航/地图路线
前端·vue.js·uni-app
随性而行3605 天前
微信API接口与AI自动化:开发者的实现思路
运维·服务器·开发语言·人工智能·微信·自动化