uniapp實(shí)現(xiàn)微信一鍵登錄按鈕樣式(膠囊按鈕的樣式)
更新時間：2024年07月17日 09:41:19 作者：Python私教
這篇文章主要介紹了uniapp實(shí)現(xiàn)微信一鍵登錄按鈕樣式，如何開發(fā)膠囊按鈕的樣式,需要的朋友可以參考下
效果圖：
關(guān)鍵點(diǎn)：讓圓角的值變成高度的一半。
核心樣式：
.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>我已閱讀并同意用戶注冊協(xié)議和隱私政策</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>到此這篇關(guān)于uniapp實(shí)現(xiàn)微信一鍵登錄按鈕樣式，如何開發(fā)膠囊按鈕的樣式的文章就介紹到這了,更多相關(guān)uniapp微信一鍵登錄按鈕樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
基于JS實(shí)現(xiàn)視頻上傳顯示進(jìn)度條
這篇文章主要介紹了基于JS實(shí)現(xiàn)視頻上傳顯示進(jìn)度條,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
Bootstrap每天必學(xué)之按鈕（Button）插件
Bootstrap每天必學(xué)之按鈕（Button）插件,通過按鈕（Button）插件，您可以添加進(jìn)一些交互，比如控制按鈕狀態(tài)，或者為其他組件（如工具欄）創(chuàng)建按鈕組，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要介紹了JavaScript模擬數(shù)組合并concat的相關(guān)資料,需要的朋友可以參考下2016-03-03
解決javascript:window.close()在chrome,Firefox下失效的問題
本篇文章是對javascript:window.close()在chrome,Firefox下失效問題的解決方法進(jìn)行了分析介紹。需要的朋友參考下2013-05-05
在JavaScript開發(fā)中,生成隨機(jī)數(shù)的需求幾乎無處不在,但不同場景對隨機(jī)數(shù)的質(zhì)量、安全性和性能要求差異巨大,本文將系統(tǒng)梳理多種隨機(jī)數(shù)生成方法,分析其原理、優(yōu)缺點(diǎn)及適用場景,并通過代碼示例幫助理解,需要的朋友可以參考下2025-08-08
JavaScriptlocalStorage基本上是瀏覽器Window對象中的存儲，您可以在中存儲任何內(nèi)容localStorage，localStorage及其相關(guān)的sessionStorage是 Web Storage API的一部分，我們將在本文詳細(xì)了解這些,需要的朋友可以參考下2023-06-06
js時間日期和毫秒的相互轉(zhuǎn)換，需要的朋友可以參考一下2013-02-02
JavaScript canvas實(shí)現(xiàn)七彩時鐘效果
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)七彩時鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
點(diǎn)擊按鈕或鏈接不跳轉(zhuǎn)只刷新頁面的腳本整理
點(diǎn)擊按鈕或鏈接時不跳轉(zhuǎn)只刷新頁面，在某些情況下還是比較實(shí)用的，下面整理些不錯的示例，感興趣的朋友可以參考下2013-10-10
javascript實(shí)現(xiàn)下班倒計時效果的方法(可桌面通知)
這篇文章主要介紹了javascript實(shí)現(xiàn)下班倒計時效果的方法,涉及javascript倒計時效果及桌面提示效果的實(shí)現(xiàn)技巧,具有一定參考借鑒價值2015-07-07