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>
相关推荐
wechatbot88820 小时前
企业微信API开发:登录-联系人查询-消息发送完整开发流程分享
汇编·微信·自动化·企业微信·ai编程·rpa
结网的兔子1 天前
【前端开发】Web端迁移至 uni-app 及鸿蒙扩展方案对比
前端·uni-app·harmonyos
2501_915909061 天前
iOS 应用反调试技详解术 检测调试器的原理与防护实践
android·ios·小程序·https·uni-app·iphone·webview
AI多Agent协作实战派1 天前
AI多Agent协作系统实战(二十八):顶栏统一战争——从1个页面异常到31个页面全量对齐
数据库·人工智能·uni-app
00后程序员张1 天前
iOS加固技术路线全面解析:Bitcode模式、源码模式与汇编模式对比及爱加密优势
android·汇编·ios·小程序·uni-app·cocoa·iphone
2501_916008892 天前
iOS IPA文件反编译与打包操作方法,拆包分析防护和加固打包
android·macos·ios·小程序·uni-app·cocoa·iphone
name好难取诶2 天前
通过对云基座和离线基座的对比,帮助开发者理解如何在不同场景下选择合适的打包方案。 什么是“基座” 在 UniApp 中,基座(也称“ ...
开发语言·uni-app·php
2501_915921432 天前
iOS手游安全反外挂解决方案:基于Xcode的加固混淆特色详解
android·安全·ios·小程序·uni-app·iphone·xcode
2501_916007472 天前
iOS App分发教程 App Store、TestFlight 与 Ad Hoc 的配置与上传方法
android·ios·小程序·https·uni-app·iphone·webview
qq_316837752 天前
uniapp 打包APP 使用 Galacean Effects 的特效
uni-app