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>
相关推荐
2501_9159184124 分钟前
Python如何抓取HTTPS请求包的完整教程与代码示例
android·ios·小程序·https·uni-app·iphone·webview
2501_916008892 小时前
全面解析常用Web前端开发工具:编辑器、调试工具、性能分析器与框架
android·前端·ios·小程序·uni-app·编辑器·iphone
编程猪猪侠3 小时前
基于uni-app-x 与 uni-app 的安卓与 H5 双向通信完整实现
android·javascript·uni-app
凌涘17 小时前
依托 BEM 规范深度剖析 WeUI 微信按钮组件开发与实现
前端·微信
m0_696212681 天前
如何用微信 API 实现多群消息同步和定时群发
微信
niech_cn1 天前
uniapp开发App(iOS、Android、鸿蒙Next)之新建项目相关细节(二)
uni-app
罗光记1 天前
Solon Server 启动模式深度解析:从 0.3MB 内核到 10+ Server 插件
其他·百度·微信·微信公众平台·新浪微博
梦梦代码精1 天前
功能堆砌不如好扩展:4 款开源商城系统的选型思考
java·docker·uni-app·开源·php
巴巴博一1 天前
uni-app / 微信小程序中 open-type=“share“ 按钮样式异常,和普通 view 无法齐平的解决方案
微信小程序·uni-app·notepad++
游九尘2 天前
JavaScript 实现三段式版本号对比函数(app升级用)
javascript·uni-app