uniapp实现微信一键登录按钮样式,如何开发胶囊按钮的样式

效果图:
在这里插入图片描述

关键点:让圆角的值变成高度的一半。

核心样式:

.content .btn{
		width: 600rpx;
		border-radius: 300rpx;
		background-color: rgb(62,204,97);
		color: white;
		font-weight: 500;
	}

完整代码:


<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>

相关推荐

  1. wpf 按钮禁用样式

    2024-07-17 05:44:05       30 阅读
  2. Android RadioButton,定制按钮样式

    2024-07-17 05:44:05       28 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-17 05:44:05       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-17 05:44:05       72 阅读
  3. 在Django里面运行非项目文件

    2024-07-17 05:44:05       58 阅读
  4. Python语言-面向对象

    2024-07-17 05:44:05       69 阅读

热门阅读

  1. WPF设置欢迎屏幕,程序启动过度动画

    2024-07-17 05:44:05       19 阅读
  2. 设计模式8种原则

    2024-07-17 05:44:05       20 阅读
  3. 内核线程之User-Mode Helpers

    2024-07-17 05:44:05       21 阅读
  4. 使用Spring Boot集成RocketMQ进行消息发送的示例

    2024-07-17 05:44:05       23 阅读
  5. 量化机器人在不同市场环境下的表现

    2024-07-17 05:44:05       22 阅读
  6. 微信小程序:2.全局开发

    2024-07-17 05:44:05       26 阅读
  7. DRF分页器(Django Restful Framework)

    2024-07-17 05:44:05       29 阅读
  8. 速盾:DDOS攻击能使用高防CDN防御吗?

    2024-07-17 05:44:05       22 阅读
  9. 面试题 29. 顺时针打印矩阵

    2024-07-17 05:44:05       24 阅读
  10. 【python】运用Request库实现爬虫

    2024-07-17 05:44:05       22 阅读
  11. opencv—常用函数学习_“干货“_9

    2024-07-17 05:44:05       32 阅读
  12. 掌握Conda配置:如何禁用Base环境的自动激活

    2024-07-17 05:44:05       22 阅读
  13. volatile的应用

    2024-07-17 05:44:05       23 阅读